Question

I’m using the drop down editor as proposed in this answer, creating a select as follows:

<select tabindex="0" id='my_select' class="editor-select select2-search">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="White">White</option>
</select>

Now I want to use select2 for the drop down.

In order to apply select2 to a drop down one has to call $("#my_select").select2(). As the select editor is added dynamically to the grid it is not obvious to me how to do it.

I would need something like a after_render but before display event to apply select2 to it.
Would appreciate any hint.

Answer 1

It would be nice to have a concrete example, but I think there are basically to strategies you could use:

Variant 1: You apply the select2 directly inside the SelectCellEditor method, from the function you’ve posted, it should work like this:

   this.init = function() {
        if(args.column.options){
          opt_values = args.column.options.split(',');
        }else{
          opt_values ="yes,no".split(',');
        }
        option_str = ""
        for( i in opt_values ){
          v = opt_values[i];
          option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
        }
        $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
        $select.appendTo(args.container);
        // init the select2 extension here
        $select.select2();
    }; 

The second variant is using mutation events. This would keep the SelectCellEditor method clean, but has some limitations: IE prior to version 9 didn’t support the mutation events at all and does not implement some of them correctly in version 9, and there are some performance issues with these events too. In your case you have to listen to DOMNodeInserted:

document.addEventListener("DOMNodeInserted", function(event){
    var target = event.srcElement || event.target,
        $selection = (target && target.tagName.toLowerCase() == 'select') ? 
            $(target) : $(target).find('select');
        // $selection is just for the case the select field 
        // is wrapped in other elements
    if($selection) {
        // apply the select2 extension
        $selection.select2();
    }
});

I put together an example, which demonstrates the dynamic apply.

The event listener in this case is very basic and limited to your request, if you are looking for a more advanced and flexible solution, there are already some libraries, which handle such events, e.g. mutabor. As I wrote above, it would help if you provide an example of your concrete code, to give the possibility to test both variants under real conditions.