I have a jqGrid multiple search dialog as below:
(Note the first
empty td in each row).
What I want is a search grid like this (below), where:
The first td is filled in with "and/or" accordingly.
The corresponding search filters are also built that way.
The
empty td is there by default, so I assume that this is a standard jqGrid feature that I can turn on, but I can't seem to find it in the docs.
My code looks like this:
<script type="text/javascript">
$(document).ready(function () {
var lastSel;
var pageSize = 10; // the initial pageSize
$("#grid").jqGrid({
url: '/Ajax/GetJqGridActivities',
editurl: '/Ajax/UpdateJqGridActivities',
datatype: "json",
colNames: [
'Id',
'Description',
'Progress',
'Actual Start',
'Actual End',
'Status',
'Scheduled Start',
'Scheduled End'
],
colModel: [
{ name: 'Id', index: 'Id', searchoptions: { sopt: ['eq', 'ne']} },
{ name: 'Description', index: 'Description', searchoptions: { sopt: ['eq', 'ne']} },
{ name: 'Progress', index: 'Progress', editable: true, searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
{ name: 'ActualStart', index: 'ActualStart', editable: true, searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
{ name: 'ActualEnd', index: 'ActualEnd', editable: true, searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
{ name: 'Status', index: 'Status.Name', editable: true, searchoptions: { sopt: ['eq', 'ne']} },
{ name: 'ScheduledStart', index: 'ScheduledStart', searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
{ name: 'ScheduledEnd', index: 'ScheduledEnd', searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} }
],
jsonReader: {
root: 'rows',
id: 'Id',
repeatitems: false
},
rowNum: pageSize, // this is the pageSize
rowList: [pageSize, 50, 100],
pager: '#pager',
sortname: 'Id',
autowidth: true,
shrinkToFit: false,
viewrecords: true,
sortorder: "desc",
caption: "JSON Example",
onSelectRow: function (id) {
if (id && id !== lastSel) {
$('#grid').jqGrid('restoreRow', lastSel);
$('#grid').jqGrid('editRow', id, true);
lastSel = id;
}
}
});
// change the options (called via searchoptions)
var updateGroupOpText = function ($form) {
$('select.opsel option[value="AND"]', $form[0]).text('and');
$('select.opsel option[value="OR"]', $form[0]).text('or');
$('select.opsel', $form[0]).trigger('change');
};
// $(window).bind('resize', function() {
// ("#grid").setGridWidth($(window).width());
//}).trigger('resize');
// paging bar settings (inc. buttons)
// and advanced search
$("#grid").jqGrid('navGrid', '#pager',
{ edit: true, add: false, del: false }, // buttons
{}, // edit option - these are ordered params!
{}, // add options
{}, // del options
{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, onInitializeSearch: updateGroupOpText, afterRedraw: updateGroupOpText}, // search options
{}
);
// TODO: work out how to use global $.ajaxSetup instead
$('#grid').ajaxError(function (e, jqxhr, settings, exception) {
var str = "Ajax Error!\n\n";
if (jqxhr.status === 0) {
str += 'Not connect.\n Verify Network.';
} else if (jqxhr.status == 404) {
str += 'Requested page not found. [404]';
} else if (jqxhr.status == 500) {
str += 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
str += 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
str += 'Time out error.';
} else if (exception === 'abort') {
str += 'Ajax request aborted.';
} else {
str += 'Uncaught Error.\n' + jqxhr.responseText;
}
alert(str);
});
$("#grid").jqGrid('bindKeys');
$("#grid").jqGrid('inlineNav', "#grid");
});
</script>
<table id="grid"/> <div id="pager"/>
