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",
                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.

What you mean under "select in in default mode"? What you mean under "right value"? Do you have some alignment problem or you want to say "correct value"? Which version of jqGrid and from which fork you use? In any way you should fix `width:"400px"` to `width: 400` and execute `$(elem).select2({...})` **after the select is filled with options**. You should call `select2` inside of `selectFilled` callback of `editoptions`. The ` — Oleg, Jun 16 '16 at 07:44

Oleg · Accepted Answer · 2016-06-17T08:18:00.430

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

score 1 · Answer 2 · answered Jun 17 '16 at 08:40

1

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

answered Jun 17 '16 at 08:40

Denis Orlov

23
7

Sorry, but what is `jqGridAddEditAfterSelectUrlComplete`? What is `$("#liststudents")`? Do you mean `$(this)` probably? Even if you would use Guriddo jqGrid then you should use `$("#liststudents").bind("jqGridAddEditAfterSelectUrlComplete", function () {...});` because, it's analog of `jqGridSelectFilled` event and not a callback. Which sense have to get selected rowid, the data and so on? The correct item in the ` – Oleg Jun 17 '16 at 09:02
The "jqGridAddEditAfterSelectUrlComplete" is "event data population in dropdown - the name is jqGridAddEditAfterSelectUrlComplete"(from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:changetwo). ("#liststudents") - it's grid id, where job_place column is located. – Denis Orlov Jun 17 '16 at 09:24
I mean that [jqGridAddEditAfterSelectUrlComplete](https://github.com/tonytomov/jqGrid/blob/v5.1.1/js/grid.common.js#L475) is **jQuery event** and not the callback which you can define inside of `editoptions`. Even if you use Guriddo then the code, which you posted will not work (`editoptions.jqGridAddEditAfterSelectUrlComplete` callback function will never be called). With `$("#liststudents")` I mean that it's bad to use gridid in case when you can get the information from options or from `this`. – Oleg Jun 17 '16 at 09:38
If Guriddo uses `$($t).triggerHandler("jqGridAddEditAfterSelectUrlComplete", [elem]);` then you should define the event handler like `$("#liststudents").bind("jqGridAddEditAfterSelectUrlComplete", function (e, elem) {...});`. You can use `$(elem).select2({...})` inside of the event handler. The code `$(this).select2({...})` will not work. In other words it seems to me that the code which you posted will **not work**. – Oleg Jun 17 '16 at 09:43
Moreover I strictly recommend you to include in the text of your question the version of jqGrid, which you use, and the fork. I could save my time if I know that you don't use free jqGrid. The codes of commercial Guriddo jqGrid JS and free jqGrid are more and more different. One can't just uses the code fragment, which I posted (or which you posted) in other fork of jqGrid. – Oleg Jun 17 '16 at 09:45
Oleg, I think that the question i answered. I solved my problem and things work as I expected. Thanks again. – Denis Orlov Jun 17 '16 at 09:55
The goal of the stackoverflow is **sharing good questions and correct solutions with other people**. It's not a help forum, where the goal is finding a solution for the person, who asked the question. I think that the code, which you posted as your answer, is incorrect and it's not works. If you really uses the code, then you can set the breakpoint inside of `editoptions.jqGridAddEditAfterSelectUrlComplete` to see that it will be never called. It could be the problem *for other readers of the question*. – Oleg Jun 17 '16 at 10:00
This code work :) And that is why I close further discussion – Denis Orlov Jun 17 '16 at 10:22
Sorry, but I don't see how the code could work if I search for `jqGridAddEditAfterSelectUrlComplete` in Guriddo source code. Do you mean that *you current code in your application work* (your code can contains other parts of code, which make all working) or you tried to set breakpoint or included `alert("OK!");` inside of `editoptions.jqGridAddEditAfterSelectUrlComplete`? Which version of Guriddo jqGrid you use? – Oleg Jun 17 '16 at 10:29

Select right value for select when using select2 with jqGrid

2 Answers2

Linked