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: 'staff', index: 'staff', width: 31, formoptions: {elmprefix: '(*) '}, editable: true, editrules: {required: true}, edittype: 'select',
                    editoptions: {value: staff,
                        dataInit: function(element) {
                            $(element).width(260).select2();
                        }
                    }
                },

The options are there and bootstrap classes are inserted into the element,

 <select id="staff" class="select2-offscreen FormElement" role="select"

but all I am getting is a blank space for the select.

See image below.

Can someone tell me why this is happening or tell me what I am doing wrong?

Thanks.

Lashondalashonde

There are a lot of css issues with bootstrap and jQgrid working together. Check this post here it helped me once: #14955087 Also you could thy to play with css classes in developer tools to check what exactly causes the problem. – Caster

Answer 1

I didn't known select2 plugin before. I tried it and can't found any problems. I suppose that you have problems with the width just because use used too large parameter of width function in $(element).width(260).select2();.

The demos: one without Bootstrap and another one with including of Bootstrap 3.0.0 works without problems. The select looks like on the picture below

I used in the demo

formatter: "select", edittype: "select",
editoptions: {
    value: "FE:FedEx;TN:TNT;IN:Intim",
    defaultValue: "Intime",
    dataInit: function(element) {
        $(element).width(122).select2({
            // add "ui-widget" class to have the same font-family like in
            //     jQuery UI Theme
            // add "ui-jqdialog" class to have font-size:11px like in other
            //     items of jqGrid form
            dropdownCssClass: "ui-widget ui-jqdialog"
        });
    }
},
stype: "select",
searchoptions: {
    value: "FE:FedEx;TN:TNT;IN:Intim",
    defaultValue: "Intime",
    dataInit: function(element) {
        $(element).width(122).select2({
            // add "ui-widget" class to have the same font-family like in
            //     jQuery UI Theme
            // add "ui-jqdialog" class to have font-size:11px like in other
            //     items of jqGrid form
            dropdownCssClass: "ui-widget ui-jqdialog"
        });
    }
}

and added the following CSS to improve the visibility (on my personal taste)

.ui-jqdialog .select2-container .select2-choice {
    height: auto;
    padding-top: 1px;
    padding-left: 0.2em;
    padding-bottom: 2px;
    line-height: 15px;
}
.ui-jqdialog .select2-container .select2-choice .select2-arrow b {
    background-position: 0 -4px;
}
.ui-jqdialog.select2-drop { padding: 0px; }
.ui-jqdialog .select2-results .select2-result-label {
    padding: 2px;
}

Additionally I added some more CSS in the demo which used Bootstrap CSS:

.ui-jqgrid table {border-collapse: separate}
.ui-jqgrid .ui-pg-input, .ui-jqgrid .ui-pg-selbox {height: 17px}
.ui-jqgrid .ui-pg-table {padding-bottom: 0}

Cobalt

I have tried everything you did here. I have even updated to the latest bootstrap but it still doesn't work. after inspecting the elements I have realise that bootstrap suppose to insert an additional div element that fits in top of the select. That is not happening for me. Can you guide me along as to why this is happening? – Lashondalashonde

@pundit: You should provide a demo which demonstrate the problem which you have. Could you get my example and modify it's code so that one can see the problem? – Cobalt

Can you tell me what version of jqgrid you are using? – Lashondalashonde

@pundit: If you opens the source of one from my demos (this one) for example you will see that I includes http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js and other files of jqGrid 4.5.4. – Cobalt

okay that solved the problem... thanks a lot Oleg. I had to update jqGrid. However I am not able to select multiple options... I guess I have to do more research. – Lashondalashonde

Answer 2

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

Youngyoungblood

Its very awesome answer. but i have only one problem, whenever i select and click anywhere else it replace the text with id. did you face anytime of this issue? – Fossa