Select right value for select when using select2 w

问题:

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

{label:"Teacher",name:"teacher",index:"teacher",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_teachers.php",
                    width:"400px",
                    dataInit: function (elem) {
                        $(elem).select2({
                            placeholder: "Choose teacher",
                            allowClear: true,
                            language:"ru"
                        });
                        setTimeout(function() {
                            $(".select2-container").width("300");
                        }, 
                        0);
                    },
                },  

But when open editForm select in in default mode. How to get select2 to select right value in editform ?

=======

Additional info. I have jqGrid. One of the column in the colModel looks like this:

{label:"Jobplace",name:"job_place",index:"job_place",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_spr_companies.php",
                    dataInit: function (elem) {
                        $(elem).select2({
                            placeholder: "Choose job place",
                            allowClear: true,
                        });
                        setTimeout(function() {
                            $(".select2-container").width("300");
                        }, 
                        0);
                    }
                },hidden:false,align:"center",sortable:true,search:true,searchoptions:{sopt:["cn"]},width:50},

So, select2 element showing "Choose job place". result editformThere is now selected vaule. But I try to edit row and this is row already have selected element. Why select2 not showing right selected value when I try do edit row? As Oleg wrote below I try to change my colModel like this:

{label:"Job place",name:"job_place",index:"job_place",editable:true,edittype:"select",
                editoptions:{
                    dataUrl:"../ajax/selects/select_spr_companies.php",
                    selectFilled: function (elem) {
                        $(elem).select2({
                            placeholder: "Choose job place",
                            allowClear: true,
                        });
                        setTimeout(function() {
                            $(".select2-container").width("300");
                        }, 
                        0);
                    }
                },hidden:false,align:"center",sortable:true,search:true,searchoptions:{sopt:["cn"]},width:50},

But I get folowing on editform: select2 completely stop to work as expected.

回答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

回答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},