How to get jQuery select2 to Populate in jQgrid

Question

I have the following code to generate a jQgrid but when I click the add icon the select2 list is blank. If I remove the select2 code the list populates fine.

jQuery 1.11.3 free jQgrid 4.13 select2(full) 4.0.3 only other file I have for select is the css

<table id="csstsoservicebulletinassignment"></table>
<div id="csstsoservicebulletinassignmentpager"></div>


<script type="text/javascript">
//var serialnumbervalidation = false;   
$(document).ready(function(){       
    var selID = "";
    var temp = "";
    var sourcevalue = "";
    var requestedchangelink = "";
    $("#csstsoservicebulletinassignment").jqGrid({
    url:'/QMSWebApp/CSSTSOControllerServlet?lifecycle=loadservicebulletinassignmentbodysection',
    editurl:'/QMSWebApp/CSSTSOControllerServlet?lifecycle=editservicebulletinassignmentbodysection',
    datatype: "json",
    height: "auto",
    colNames:['Index#','CO#','iService Bulletin#','Service Bulletin#'],
    colModel:[
        {name:'id', index:'id', width:60, hidden: true, editable: true, editoptions:{ readonly:'readonly'}, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Index#:"}},
        {name:'cono', index:'cono', width:60, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"CO#:"}},
        {name:'sbnoindx', index:'sbnoindx', width:60, hidden: true, editable: true,
         editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Service Bulletin#:"},
          edittype: "select",
           editoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=servicebulletinoptions',
                    selectFilled: function (options) {
                        $(options.elem).width(122).select2({
                            dropdownCssClass: 'ui-widget ui-jqdialog',
                            //width: '100%'
                        });
           }},
           stype: "select",
           searchoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=servicebulletinoptions',
                selectFilled: function (options) {
                        $(options.elem).width(122).select2({
                            dropdownCssClass: 'ui-widget ui-jqdialog',
                            //width: '100%'
                        });    
           }
        }},
        {name:'sbnolink', index:'sbnolink', width:500, hidden: false},
        ],
        onSelectRow: oSelect,
        rowNum:10,
        rowList:[10,15,20,25,30],
        loadonce: true,
        pager: '#csstsoservicebulletinassignmentpager',
        viewrecords: true,
        gridview: true,
        loadComplete: lComplete,
        caption:"Service Bulletin Assignment"

    });
    $("#csstsoservicebulletinassignment").jqGrid('navGrid','#csstsoservicebulletinassignmentpager',
        {edit:false,add:true,del:true,search:true,view:false,
        beforeRefresh: function(){
            $("#csstsoservicebulletinassignment").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
            }},
        {url:'/QMSWebApp/CSSTSOControllerServlet?lifecycle=editservicebulletinassignmentbodysection',
         recreateForm: true,
         width: 400,
         zIndex: 500992,
         viewPagerButtons: false,
         beforeShowForm: bsEditForm,
         afterShowForm: asEditForm, 
         checkOnSubmit: false,
         afterSubmit: asubEditForm,
         },
        {recreateForm: true,
        zIndex: 500992,
         beforeInitData: biAddForm,
         beforeShowForm: bsAddForm,
         afterShowForm: asAddForm,
         beforeSubmit: bsubAddForm,
         checkOnSubmit: false,
         afterSubmit: asubAddForm,
         afterComplete: afComp,
         width: 400,
         },
        {zIndex: 500992},
        {zIndex: 500992},
        {recreateForm: true,
        zIndex: 500992,
         width: 400,
         viewPagerButtons: false 
         }
    );

    function lComplete(data){

        $('.viewservicebulletincontext').on("click", function(){

            var servicebulletinno = this.getAttribute("data-servicebulletin");
            progress();
            setTimeout(function(){
                $('.miscdisplay2').load("/QMSWebApp/CSSTSOControllerServlet",
                {lifecycle:"viewservicebulletincontext",servicebulletinno:servicebulletinno});
                $('.miscdisplay2').show("slide", { direction: "right" }, 1000);     
            },100);

        });


        hideProgressDisplay();           
    };
    function oSelect(id){
        //$("#csstsoservicebulletinassignment").setColProp('twotype', { editoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=twotypeoptions'}});       

    };

    function bsEditForm(formId){

        $('#tr_id', formId).hide();
        $('#tr_cono', formId).hide();
        $('#tr_sbnolink', formId).hide();

    }
    function asEditForm(formId){


    }
    function asubEditForm(response, postdata){
        return [true,"Ok"];

    }
    function biAddForm(formId){
        //$("#csstsoservicebulletinassignment").setColProp('sbnoindx', { editoptions: { dataUrl: '/QMSWebApp/CSSTSOControllerServlet?lifecycle=servicebulletinoptions', selectFilled: function(options){$(options.elem).select2({dropdownCssClass: "ui-widget ui-jqdialog",width: "100%"});}}});        

    };
    function bsAddForm(formId){

        $('#tr_id', formId).hide();
        $('#tr_cono', formId).hide();
        $('#tr_sbnolink', formId).hide();

    }

    function asAddForm(formId){

    }

    function bsubAddForm(postdata, formid){
                        return [true,"Ok"];
        //}

    }
    function afComp(response,postdata,formId){


    }
    function asubAddForm(response, postdata){

        var res = $.parseJSON(response.responseText);
        if(res){
            if(!res.errorCode){

                return [false,res.message];

            }
            else{

                return [true,"Ok"];
            }
        }
        else{

            return [true,"Ok"];
        }

    }

    $('.csstsoservicebulletinassignmentFormClose').on("click", function(){

        //$('.miscdisplay2').hide("slide", { direction: "right" }, 1000);
        $('.miscdisplay').hide("slide", { direction: "right" }, 1000);

    });     

});

Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/formEditOnDoubleClick-jqueryui-fa3.htm), which I created for [the answer](http://stackoverflow.com/a/37876387/315935). It uses free jqGrid with select2 and it works with with form and inline editing. The code, which you posted, contains many other things. It's difficult to decide what problem you have exactly without seeing the demo, which reproduce your problem. Probably comparing your code with my demo helps you to see the defference. — Oleg, Oct 17 '16 at 20:52
@Oleg Just moved the add form and the list was displaying underneath the form. So it must be a z-index issue. Is there a way to put the select2 list on top? The add form has a z-index of 500992. — Steve Dyke, Oct 17 '16 at 21:37

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

You use zIndex: 500992 option, which seems be unneeded. You can just remove it to make your demo working. Compare with the demo created for the answer

If you really require z-index: 500992 for the Add/Edit dialogs, then you have to increase the z-index of .select2-dropdown, used for the dropdown menu of select2 (by usage .select2-dropdown { z-index: 500993; } for example). You use already the option dropdownCssClass: 'ui-widget ui-jqdialog', which add custom classes to the dropdown menu. You can modify the option to

dropdownCssClass: "ui-widget ui-jqdialog mycustomclass"

and to add one more CSS rule:

.mycustomclass { z-index: 500993; }

It should fix your problem.

edited May 23 '17 at 12:19

Community

1
1

answered Oct 17 '16 at 22:00

Oleg

220,925
34
403
798

This has fixed it. Thank you so much. – Steve Dyke Oct 17 '16 at 22:16
@Oleg sir please can you look into this question http://stackoverflow.com/questions/40107837/define-ngclick-in-the-jqgrid – shv22 Oct 20 '16 at 04:36
@shv22: Sorry, but your question is really difficult to read. I don't understand your main problem: why you not just use jQuery UI dialog for example to create the popup on click? Test data for `mydata` together with `scopes.gridheadercolumns` and `scopes.gridcolumns` could be helpful too. It would be much better if you create the demo, which reproduces the problem. Look at [the old demo](http://www.ok-soft-gmbh.com/jqGrid/OK/angular-popover-ng-click1.htm), which I created for [the answer](http://stackoverflow.com/a/29525862/315935). – Oleg Oct 20 '16 at 10:06
@Oleg sorry sir but my problem it is not a simple jqgrid unit...in our case, we will define the column name in XML with its properties, one js file has all the function to load the drop down, hit the URL, convert response from XML to JSON and the last one is the file where all the structure of widgets is defined. In this file we will define how to load the jqgrid...problem is beforeSelectRow can be defined only in widget manager the last one and the flow is from XML to home.js to widget manager...if we have load function in widget manager how to pass parameter to widget manager – shv22 Oct 20 '16 at 10:36
@Oleg how do you suggest I do same thing here and i will try to create a demo – shv22 Oct 20 '16 at 10:48

How to get jQuery select2 to Populate in jQgrid

1 Answers1