Select right value for select when using select2 with jqGrid

Question

I\'m using select2 with jqGrid. For \"select\" elemets I do folowing:

{label:\"Teacher\",name:\"teacher\",index:\"teacher\",editable:true,edittype:\"select\"         


        

Answer 1

It seems to me that the reason of the problem very easy. You use selectFilled in the wrong way. The most callbacks introduced in free jqGrid have one parameter options which have different properties which can be used by the callback. In the way one can write short code without declaring unused parameters and one can extend the list of option of the callback later without breaking compatibility to the previous versions. In other words you can use select2 in the following way for example:

selectFilled: function (options) {
    $(options.elem).select2({
        dropdownCssClass: "ui-widget ui-jqdialog",
        width: "100%"
    });
}

The usage of dropdownCssClass fixes the font size and the style of the dropdown created by select2.

The demo demonstrates the above code. It uses

edittype: "select", editoptions: {
    dataUrl: "ShippedVia.htm",
    defaultValue: "DHL",
    selectFilled: function (options) {
        $(options.elem).select2({
            dropdownCssClass: "ui-widget ui-jqdialog",
            width: "100%"
        });
    }
}

where the data loaded from dataUrl has the following HTML fragment

<select>
    <option value="FedEx">FedEx</option>
    <option value="TNT">TNT</option>
    <option value="DHL">DHL</option>
</select>

The demo works with both inline editing and form editing. The GUI looks like on the pictures below:

and

Answer 2

Thank you, Oleg. Anyway you make me think another way. That is how I get this work as I need.

 {label:"Job Place",name:"job_place",index:"job_place",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_spr_companies.php",
                    jqGridAddEditAfterSelectUrlComplete:function() {
                        var rid = $("#liststudents").getGridParam('selrow');
                        if (rid != null) {
                            var rowData = jQuery("#liststudents").jqGrid('getRowData',rid);
                            $(this).select2({
                                placeholder: "Choose company",
                                allowClear: true,
                            });
                            var mydata = $(this).select2();
                            mydata.val(rowData.job_place).trigger("change");
                        }
                        $(this).select2({
                            placeholder: "Choose company",
                            allowClear: true,
                        });
                        setTimeout(function() {$(".select2-container").width("300");},0);
                    }
                },hidden:false,align:"center",sortable:true,search:true,searchoptions:{sopt:["cn"]},width:50},