I'm trying to get this Excel like filtering in jqgrid working in internet explorer 8. It's works fine in Chrome but in Internet Explorer the rows are somehow filtered out by the code. If I'm not using the JSon data and copy the local data from the oleg example all seems to work fine... My target browser is IE 8, need to use JSon data and am using JQgrid 4.4.1 and multiselect 1.13.6. Help is much appreciated :-)
Update After several refreshes it works sometimes in IE. Can it have something to do with the JSon data loading time?
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
var scannamenlijst = '@ViewBag.scannamenlijst';
//<![CDATA[
/*global $ */
/*jslint unparam: true, plusplus: true, browser: true */
$(function () {
$grid = $("#list"),
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.siblings('button.ui-multiselect').css({
width: inToolbar ? "98%" : "100%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}, 50);
};
$grid.jqGrid({
url: '/Stakeholder/getscanresponses/',
mtype: 'POST',
datatype: "json",
jsonReader: {
root: "rows", //array containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
//id: "initiatiefid" //index of the column with the PK in it
},
colNames: ['Initiatief', 'Respondent', 'Scan', 'Datum'],
colModel: [
//{name:'id',index:'id',width:70,align:'center',sorttype: 'int'},
{ name: 'initiatiefnaam', index: 'initiatiefnaam', width: 165 },
{ name: 'respondentnaam', index: 'respondentnaam', width: 165 },
{
name: 'scannaam', width: 200, align: 'center', formatter: 'select',
edittype: 'select',
editoptions: {
value: scannamenlijst,
//defaultValue: 'Intime',
multiple: true
},
stype: 'select',
searchoptions: {
sopt: ['eq', 'ne'],
value: scannamenlijst,
attr: { multiple: 'multiple', size: 4 },
dataInit: dataInitMultiselect
}
},
{ name: 'responsedatum', index: 'responsedatum', width: 165, formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: 'd/m/Y H:i:s' }, sorttype: 'date' }
],
rowNum: 20,
rowList: [5, 10, 20],
pager: '#pager',
loadonce: true,
gridview: true,
ignoreCase: true,
rownumbers: true,
sortname: 'responsedatum',
viewrecords: true,
sortorder: 'desc',
caption: "Scanrespondenten",
height: '100%',
beforeRequest: function () {
modifySearchingFilter.call(this, ',');
}
});
$grid.jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false }, {}, {}, {}, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true
});
$grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch });
});
//]]>
</script>
