Hello. Faced the following problem:

In the editing form, you must select values ​​from the drop-down lists, and the lists are quite large (> 8000 lines). That the user could search in the necessary values, I fastened jquery-ui-combobox. However, when this form appears, the values ​​are missing:

enter image description here

Without combobox-ui, in the usual DropDownList values ​​are present / displayed. And, by the way, if you edit only the Минимальное количество field, the message below does NOT appear and everything goes fine, only it is edited, everything else remains unchanged (does it mean where it is?).

enter image description here

Otherwise combo boxes work fine: values ​​are selected and the table is edited as required.

Is there a way to display values ​​in combo boxes after opening a form?

I give a piece of code:

 $("#bmList").jqGrid({ url: bmListUrl, editurl: NovMarketEditUrl, colNames: ['ID', 'Аптека', 'Аптека', "Груп. код", 'Наименование', 'Наименование', 'Минимальное количество'], datatype: "json", colModel: [ { name: 'id', index: 'id', key: true, width: 5, editable: false, editoptions: { readonly: true, style: "width: 30px" } }, { name: 'ca_id', index: 'ca_id', hidden: true, viewable: true, editable: true, stype: 'select', edittype: 'select', editrules: { required: true, edithidden: true, custom: true, custom_func: ddlSelected }, editoptions: { dataUrl: "/NovMarket/GetAptCode", dataInit: function (elem) { $(elem).combobox(); } } }, { name: 'new_num', index: 'new_num', width: 20, editable: false }, { name: 'gk_id', index: 'gk_id', width: 7, editable: false, sortable: true }, { name: 'gk_id', index: 'gk_id', hidden: true, viewable: true, editable: true, stype: 'select', edittype: "select", editrules: { required: true, edithidden: true, custom: true, custom_func: ddlSelected }, editoptions: { dataUrl: "/NovMarket/GetGroupCode", dataInit: function (elem) { $(elem).combobox(); } } }, { name: 'gk_name', index: 'gk_name', width: 80, editable: false }, { name: 'MinQty', index: 'MinQty', width: 15, align: "right", editable: true, edittype: 'text', sortable: true }, ], prmNames: { id: "id" }, rowNum: 10, rowList: [10, 20, 30], pager: '#bmPager', loadonce: false, sortname: 'id', viewrecords: true, sortorder: "desc", caption: "Новинки", width: 800, height: 300 }) .jqGrid('navGrid', '#bmPager', { edit: true, add: true, del: true, view: false, search: false, refresh: true, width: 800, height: 800 }, { width: 600, recreateForm: false, closeAfterEdit: true },// edit options { width: 600, recreateForm: false, closeAfterAdd: true }, // add options { reloadAfterSubmit: true }, // del options { top: 100, left: 100, sopt: ['cn', 'bw', 'eq', 'ew'] }// search options ) .jqGrid('navButtonAdd', '#bmPager', { caption: "", buttonicon: "ui-icon-custom-excel", onClickButton: function () { window.location = showReportUrl; }, position: "last", title: "Выгрузить в Excel", cursor: "pointer" } )

I can not figure out on my own with this problem.
I tried to set my value in this way in different form events:

 .......... $(elem).combobox(); $(elem).combobox('setvalue', '10'); ..........

No result. With all the other things, if you put this list not on the edit form, but directly onto the page and set its value, then everything goes smoothly. But not on this form.

PS jqGrid 4.7.0, jquery-ui-1.12.0, jquery-3-1-0

  • one
    I just wrote a comment on the English copy of the question. If there are problems with the language, then I can answer in Russian here. - Oleg
  • one
    By the way, I personally prefer to use select2 in such cases. See my old answer and this usage example. - Oleg
  • @Oleg, Thank you very much, figured out with your help. Although it is strange why in such a popular version of jqGrid there is no such useful function as in your grid ... - MB
  • Glad I could help. My fork is the further development of jqGrid 4.7.0. I tried to maintain maximum compatibility with jqGrid 4.7.0, eliminating bugs, improving speed and implementing new features. Here you can see that the number of commits after v4.7.0 exceeds 1200. So, selectFilled is just a small example of new features. For example, I recommend using the Font Awesome vector icon. See an example here . - Oleg

1 answer 1

JQuery UI 1.12.0 is missing a standard combobox widget, which can be used as $(elem).combobox(); . You used dataUrl and combinations with some kind of combobox-plugin.

I believe that the cause of your problem is the following: You call the combobox on an empty <select> 'e, before receiving and processing data from the dataUrl . I would recommend that you switch from jqGrid 4.7.0 to free jqGrid , which I develop after changing the license agreement in version 4.7.1, renaming the product to Guriddo jgGrid JS (see here and here ).

Free jqGrid supports the new selectFilled selectFilled , which can be used in editoptions instead of dataInit . It is important to emphasize that dataInit is called immediately, while selectFilled only after data processing from dataUrl . So <select> already filled with data and $(elem).combobox(); must work.

By the way, I personally prefer to use select2 in such cases. See my old answer and this usage example . I would also recommend that you look at the new free jqGrid features that I’m reading to each publisher in the readme. The wiki and preliminary documentation may provide additional information.

  • In jQuery UI 1.12.0, there is no standard combobox widget ... Yes, you are right, I didn’t put it right .. I used the jquery-ui autocomplete combobox , and by "normal DropDownList" I meant <select id="countires" name="countires"><option value="">Countries</option>....... - MB