Apply Select2 to Slickgrid Editor

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.

"Please provide a jsfiddle to check validness of solution" could you provide a jsfiddle for us to use as a starting point? So we can see what you've tried so far, what already works, what does not, etc. — mgibsonbr, Jan 31 '13 at 09:49
Will do so, you are right. The reason that I did not provide one, is that my grid is currently using a lot of ajax and I have to create a simplified one to show the core problem I'm facing. Will find some time in a few hours after work. Thanks for the hint! — Thomas Kremmel, Jan 31 '13 at 10:55

score 3 · Accepted Answer · answered Feb 02 '13 at 10:21

3

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.

answered Feb 02 '13 at 10:21

axel.michel

5,764
1
15
25

Thanks. Actually variant 1 works. In your jsfiddle, which is also interesting, the dropdown gets presented, but using Chrome or Safari I'm not able to select a value in the dropdown. – Thomas Kremmel Feb 03 '13 at 11:46
@Tom oh you are right, select2 seems not to be compatible with jQuery 1.9 if you change the included lib down to version 1.7 you can select. Updated fiddle is here: http://jsfiddle.net/axelmichel/4czPG/2/ – axel.michel Feb 03 '13 at 12:01
Thanks. Enjoy your bounty! – Thomas Kremmel Feb 03 '13 at 15:16
@Tom you are welcome - can you tell me which solution you'll use? – axel.michel Feb 03 '13 at 15:26
The first one, as I want to use select2 for the dropdowns in all of my grids used in my app. – Thomas Kremmel Feb 03 '13 at 17:57
I just tested the first approach in IE and IE seems to have a rendering issue with this approach. http://stackoverflow.com/questions/16295348/select2-dropdown-in-internet-explorer-shows-object-screen-instead-of-correct-v .. In case you read this I just wanted to ask whether you tested your approach also in IE9. :) – Thomas Kremmel Apr 30 '13 at 08:30
@Tom Do you mean, you have these strange "Object" options in IE? Could you provide a demo for this? Did you try to use: if (opt_values.hasOwnProperty(i)) {....} to avoid inherit object properties? – axel.michel May 28 '13 at 08:44
Hey Axel, it was my fault. In my implementation I used the variable name screen which is reserved in IE for referencing to the "screen". See my last comment in the reference question. Exchanging the variable name screen with something else helped.. – Thomas Kremmel May 28 '13 at 12:02
Same probleblem with jQuery 1.10, including jquery.migrate 1.1.0 will resolved problem. – Igor Mancos Apr 11 '14 at 06:28

Apply Select2 to Slickgrid Editor

1 Answers1