Using bootstrap select2 with JqGrid form

Question

I am trying to implement bootstrap select2 with jqgrid form but can seem to get it right.

on the colmodel of the jqgrid declaration I have:

 {name: \         


        

Answer 1

I try to use select2 in dataInit function directly as you do(the difference is I use ajax data source)，it looks good but can't work correctly:

1. the value can't sent to the server.
2. select one row -> edit ,but the select2 not init with the old value.

At last, I gave up this method and try to use edittype:'custom'

colModel:[
    {name:'model_id',label:'mID',
        hidden: true,
        hidedlg: true, // the hidden model_id column 
        search: false, // used for offer id info to select2
    },
    {name:'model',label:'model',width:150,
        editable:true,
        edittype:'custom',
        editoptions:{
          custom_element: myselect2elem,
          custom_value: myselect2value,
          dataInit: myselect2init('180','chose model','search/servermodel','model_id','model'),
        },
        editrules:{
          edithidden: true,
          required: true,
        },
},

I defined three functions:

• myselect2elem(value, options) // init a common element
• myselect2value(elem, operation, value) // get|set value of the element
• myselect2init(width,holder,url,opt,cel_name_id,cel_name) // init element use select2

details

function myselect2elem(value, options) {
    var el = document.createElement("select");
    el.value = value;
    return el;
}

function myselect2value(elem, operation, value) {
      if(operation === 'get') {
        return $(elem).val();
      } else if(operation === 'set') { // this doesn't work，
        $(elem).value=value;  // I don't know whether have side effect
      }
}

function myselect2init(width,holder,url,cel_name_id,cel_name){
    var option = {
        width: width,
        placeholder: holder,
        ajax: {
            url: url,
            /*
            the other ajax configuration option that only selet2 used
            */
        },
    }
    return function(element) {
      $(element).children(".customelement").select2(option)
      // do the init 'set' operation that previous function should do
      selRowId = $(this).jqGrid ('getGridParam', 'selrow'),
      celId = $(this).jqGrid ('getCell', selRowId, cel_name_id);
      celValue = $(this).jqGrid ('getCell', selRowId, cel_name);
      if (celValue){
        var newOption = new Option(celValue, celId, true, true);
        $(element).children(".customelement").append(newOption).trigger('change');
      }
    }
  }

Thanks for your question about this, thanks the answer of @Oleg. I want my answer can help other people