Steve Dyke Steve Dyke - 1 month ago 24
jQuery Question

How to get jQuery select2 to Populate in jQgrid

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

});

});



Answer

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.