JQGrid MultiSelect Filter option populate based on column's distinct value(part-II) - jqgrid

Question

I am using this to fill multiselect filter value based on those are present in available rows for particular column.
I am facing below issue when going to delete selected row i.e. say I have deleted the first row, after deletion multiselect filter should recalculate the value based on those are present in available rows for particular column(for SkillCategory). We can see after deletion first row still "Data" value is available for SkillCategory multiselect filter.
How can I recalculate multiselect filter value after deleting row/add/update?
<script type="text/javascript">
function loadCompleteHandler1() {
initializeGridFilterValueSupply();
}
jQuery(function () {
$.extend(true, $.jgrid.search, {
beforeShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({
of: window,
at: "center center",
my: "center center"
});
}
});
$.extend($.jgrid.edit, { viewPagerButtons: false });
$grid = $("#listTableSupply"),
myDefaultSearch = "cn",
getColumnIndexByName = function (columnName) {
var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
filters = $.parseJSON(this.p.postData.filters);
if (filters && filters.rules !== undefined && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
iCol = getColumnIndexByName.call(this, rule.field);
cmi = cm[iCol];
if (iCol >= 0 &&
((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
&& (rule.op === myDefaultSearch)) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt[0] === rule.op)) {
// make modifications only for the 'contains' operation
parts = rule.data.split(separator);
if (parts.length > 1) {
if (filters.groups === undefined) {
filters.groups = [];
}
group = {
groupOp: 'OR',
groups: [],
rules: []
};
filters.groups.push(group);
for (j = 0, l = parts.length; j < l; j++) {
str = parts[j];
if (str) {
// skip empty '', which exist in case of two separaters of once
group.rules.push({
data: parts[j],
op: rule.op,
field: rule.field
});
}
}
rules.splice(i, 1);
i--; // to skip i++
}
}
}
this.p.postData.filters = JSON.stringify(filters);
}
},
dataInitMultiselect = function (elem) {
setTimeout(function () {
var $elem = $(elem), id = elem.id,
inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function () {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
return;
}
},
$options = $elem.find("option");
if ($options.length > 0 && $options[0].selected) {
$options[0].selected = false; // unselect the first selected option
}
if (inToolbar) {
options.minWidth = 'auto';
}
//$elem.multiselect(options);
$elem.multiselect(options).multiselectfilter({ placeholder: '' });
$elem.siblings('button.ui-multiselect').css({
width: inToolbar ? "98%" : "100%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}, 50);
};
jQuery("#listTableSupply").jqGrid({
url: 'HttpHandler/SupplyHandler.ashx',
ajaxSelectOptions: { cache: false },
postData: { ActionPage: 'TransportType', Action: 'Fill' },
datatype: 'json',
mtype: 'GET',
colNames: ['SupplyId', 'Account', 'AccountPOC', 'COE', 'Type', 'Location', 'EmpId', 'EmpName', 'Designation', 'AvailabilityDate', 'AvailabilityMonth', 'Exp', 'SkillCategory', 'PrimarySkill', 'SecondarySkill', 'OtherSkill', 'Role', 'VisaStatus', 'Country', 'Comments'],
colModel: [
{ name: 'SupplyId', index: 'SupplyId', width: '5%', align: 'center', sortable: true, resizable: true, hidden: true },
{
name: 'Account', index: 'Account', width: '10%', sortable: true, resizable: true, stype: 'select'
},
{ name: 'AccountPOC', index: 'AccountPOC', width: '5%', sortable: true, resizable: true, hidden: true },
{
name: 'COE', index: 'COE', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'Type', index: 'Type', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'Location', index: 'Location', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{ name: 'EmpId', index: 'EmpId', width: '5%', sortable: true, resizable: true, hidden: true },
{ name: 'EmpName', index: 'EmpName', width: '5%', sortable: true, resizable: true, hidden: true },
{
name: 'Designation', index: 'Designation', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'AvailabilityDate', index: 'AvailabilityDate', width: '5%', sortable: true, search: true, resizable: true, stype: 'select'
},
{ name: 'AvailabilityMonth', index: 'AvailabilityMonth', width: '5%', sortable: true, resizable: true, hidden: true },
{
name: 'Experience', index: 'Experience', width: '5%', sortable: true, resizable: true, search: true, stype: 'select'
},
{
name: 'SkillCategory', index: 'SkillCategory', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'PrimarySkill', index: 'PrimarySkill', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'SecondarySkill', index: 'SecondarySkill', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'OtherSkill', index: 'OtherSkill', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'CurrentRole', index: 'CurrentRole', width: '5%', sortable: true, resizable: true,
stype: 'select'
},
{
name: 'VisaStatus', index: 'VisaStatus', width: '5%', sortable: true, resizable: true,
stype: 'select'
},
{
name: 'Country', index: 'Country', width: '5%', sortable: true, resizable: true,
stype: 'select'
},
{ name: 'Comments', index: 'Comments', width: '5%', search: false, sortable: false, resizable: true },
],
width: '1192',
height: '300',
loadonce: true,
pager: '#pagerSupply',
gridview: true,
rowNum: 15,
rowList: [15, 30, 45],
rowTotal: 5000,
sortorder: 'asc',
ignoreCase: true,
sortname: 'Account',
viewrecords: true,
rownumbers: true,
toppager: true,
caption: 'Supply',
emptyrecords: "No records to view",
loadtext: "Loading...",
refreshtext: "Refresh",
refreshtitle: "Reload Grid",
loadComplete: loadCompleteHandler1,
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
},
beforeRequest: function () //loads the jqgrids state from before save
{
modifySearchingFilter.call(this, ',');
}
}).jqGrid('bindKeys');
$('#listTableSupply').bind('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
});
//setSearchSelect("SkillCategory");
$('#listTableSupply').jqGrid('navGrid', '#pagerSupply', {
cloneToTop: true,
refresh: true, refreshtext: "Clear Filter", edit: false, add: false, del: true, search: false
}, {}, {}, {//Del
closeOnEscape: true, //Closes the popup on pressing escape key
drag: true,
recreateForm: true,
//closeAfterEdit: true,
url: 'HttpHandler/SupplyHandler.ashx',
delData: {
ActionPage: 'TransportType', Action: 'Delete',
SupplyId: function () {
var sel_id = $('#listTable').jqGrid('getGridParam', 'selrow');
var value = $('#listTable').jqGrid('getCell', sel_id, 'SupplyId');
return value;
}
},
afterShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({ of: window, my: "center center", at: "center center" });
//$form.closest(".ui-jqdialog").position({of: window,at: "center center",my: "left top"});
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
//$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after del
return [true, '']
}
else {
if (response.responseText == "Record Successfully Deleted!!!") {
//$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
var myInfo = '<div class="ui-state-highlight ui-corner-all">' +
'<span class="ui-icon ui-icon-info" ' +
'style="float: left; margin-right: .3em;"></span>' +
'<span>Record Successfully Deleted!!!</span></div>';
var infoTR = $("table#TblGrid_listTable>tbody>tr.tinfo");
infoTD = infoTR.children("td.topinfo");
infoTD.html(myInfo);
infoTR.show();
setTimeout(function () {
infoTD.children("div").fadeOut('slow',
function () {
infoTR.hide();
});
}, 8000);
initializeGridFilterValueSupply();
return [true, '']
}
else {
return [false, response.responseText]//Captures and displays the response text on th Del window
}
}
}
}, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true
});
jQuery("#listTableSupply").jqGrid('navButtonAdd', '#listTableSupply_toppager_left', { // "#list_toppager_left"
caption: "Refresh",
buttonicon: 'ui-icon-refresh',
onClickButton: function () {
$("#listTableSupply").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid", [{ page: 1 }]);
initializeGridFilterValueSupply();
}
});
jQuery("#listTableSupply").jqGrid('navButtonAdd', '#pagerSupply', { // "#list_toppager_left"
caption: "Refresh",
buttonicon: 'ui-icon-refresh',
onClickButton: function () {
$("#listTableSupply").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid", [{ page: 1 }]);
initializeGridFilterValueSupply();
}
});
});
//]]>
</script>
<script type="text/javascript">
initializeGridFilterValueSupply = function () {
jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
setSearchSelect("Account", jQuery("#listTableSupply"));
setSearchSelect("COE", jQuery("#listTableSupply"));
setSearchSelect("AccountPOC", jQuery("#listTableSupply"));
setSearchSelect("Type", jQuery("#listTableSupply"));
setSearchSelect("Location", jQuery("#listTableSupply"));
setSearchSelect("Designation", jQuery("#listTableSupply"));
setSearchSelect("EmpName", jQuery("#listTableSupply"));
setSearchSelect("AvailabilityDate", jQuery("#listTableSupply"));
setSearchSelect("Experience", jQuery("#listTableSupply"));
setSearchSelect("SkillCategory", jQuery("#listTableSupply"));
setSearchSelect("PrimarySkill", jQuery("#listTableSupply"));
setSearchSelect("SecondarySkill", jQuery("#listTableSupply"));
setSearchSelect("OtherSkill", jQuery("#listTableSupply"));
setSearchSelect("CurrentRole", jQuery("#listTableSupply"));
setSearchSelect("VisaStatus", jQuery("#listTableSupply"));
setSearchSelect("Country", jQuery("#listTableSupply"));
jQuery("#listTableSupply").jqGrid("filterToolbar", {
stringResult: true,
searchOnEnter: true,
defaultSearch: myDefaultSearch,
beforeClear: function () {
$(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
this.selected = false; // unselect all options
});
$(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
}).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
});
jQuery("#listTableSupply").jqGrid('setGridHeight', 300);
}
</script>

Answer 1

I got my answer.
I need to use destroyFilterToolbar to destroy the filter toolbar and then create the toolbar one more time using filterToolbar.
initializeGridFilterValueDemand = function () {
//jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
setSearchSelect("AccountName", jQuery("#listTableDem"));
setSearchSelect("COE", jQuery("#listTableDem"));
setSearchSelect("DemandType", jQuery("#listTableDem"));
setSearchSelect("Location", jQuery("#listTableDem"));
setSearchSelect("Designation", jQuery("#listTableDem"));
setSearchSelect("Experience", jQuery("#listTableDem"));
setSearchSelect("ExpectedRole", jQuery("#listTableDem"));
setSearchSelect("SkillCategory", jQuery("#listTableDem"));
setSearchSelect("PrimarySkill", jQuery("#listTableDem"));
setSearchSelect("SecondarySkill", jQuery("#listTableDem"));
setSearchSelect("OtherSkill", jQuery("#listTableDem"));
setSearchSelect("RequiredDate", jQuery("#listTableDem"));
setSearchSelect("CriticalFlag", jQuery("#listTableDem"));
setSearchSelect("ConfidenceFactor", jQuery("#listTableDem"));
setSearchSelect("HiringSOId", jQuery("#listTableDem"));
**jQuery("#listTableDem").jqGrid("destroyFilterToolbar");**
jQuery("#listTableDem").jqGrid("filterToolbar", {
stringResult: true,
searchOnEnter: true,
defaultSearch: myDefaultSearch,
beforeClear: function () {
$(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
this.selected = false; // unselect all options
});
$(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
}).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
});
jQuery("#listTableDem").jqGrid('setGridHeight', 300);
}
And I am calling it in loadComplete event.
Update:
This will not going to work if we use destroyGroupHeader