Here is a quick snippet for inline edit JqGrid with Select2
First, we need to bind colModel with select2 in dataInit :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var colModel = [ // always put uuid and id {name:’id’, hidden: true}, {name:’uuid’, hidden: true}, {name:’youroption’, label:’yourlabel’,editable: true, edittype: "select", editrules: { required: true }, width:450, editoptions: { value: [[1, ], dataInit: function (elem) { $(elem).width(450).select2(); $(elem).addClass("select2box"); } }}, … |
Second, we need to fix select2 “enter key” to hide search box and execute inline edit save.
1 2 3 4 5 6 7 | $(document).on(‘keyup’, ‘.select2-search > input.select2-input’, function (e) { // Close select2 if enter key if(e.keyCode === 13) { $(‘select.select2box’).select2("enable", false); $(selector).jqGrid(‘saveRow’, lastSel, false, ‘clientArray’); } }); |