Inline edit jqgrid with select2


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’);
      }
  });

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.