How to subscribe to load event of keyword type field from fieldBuilder?

Question

So, I have following code in my Tridion Extension for ComponentView window:

$evt.addEventHandler(view.properties.controls.fieldBuilder, "load", function () {
  var field = this.getField("keyword_field");
  console.log(field.getElement().innerHTML);
});

and console shows something like that:

<div>
  <div class="keywordselect">
    <div class="content"></div>
    <div class="buttons" style="visibility: hidden;">
      <div class="button add" id="buttonAdd" title="Add" style="-webkit-user-select: none;">
        <span class="text">&nbsp;</span>
      </div>
    </div>
  </div>
</div>

so I can't see select content which load later:

<div>
  <div>
    <div class="keywordselect">
      <div class="content">
        <select size="5" multiple="true">
          <option value="value">value</option>
        </select>
      </div>
      <div class="buttons" style="visibility: hidden;">
        <div class="button add" id="buttonAdd" title="Add" style="-webkit-user-select: none; visibility: visible;">
          <span class="text">&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
</div>

The question is: how I can hook to this event when select load itself? I've tried $evt.addEventHandler(field, "load", func) and $evt.addEventHandler(field.getInputControl(), "load", func), but without any luck unfortunately.

Answer 1

The thing is that Field builder has its field, and in this case “load” event means that field builder is loaded, with the fields, but fields are not loaded by itself.

In case of Keyword field, it uses XSLT transformation to render field view.

Unfortunately Keyword select control does not fire any events which might help in this case. Thus I would suggest to extend _onItemDraw method from \WebUI\Editors\CME\Controls\KeywordSelect\KeywordSelectControl.js

Eric gave a good reply on how it can be possibly done in a similar post: https://tridion.stackexchange.com/a/1856/206

The extended code will look like:

(function ()
{
    var overridenKeywordSelectControl$_onItemDraw = Tridion.Controls.KeywordSelectControl.prototype._onItemDraw;
    Tridion.Controls.KeywordSelectControl.prototype._onItemDraw = function KeywordSelectControl$_onItemDraw()
    {
        // Call original method
        overridenKeywordSelectControl$_onItemDraw.apply(this);


        // Do an action you need
        var element = this.properties.container;
        console.log(element.innerHTML);

        // Or fire event which you can handle elsewhere
        this.fireEvent("extension_oncontroldrawn");
    };
})();