I have added a search textbox which allows users to perform search on all rows and columns now i want to get all the filtered rows in json format so i can generate a report. Below is the code for Jqgrid
var grid = $("#jqGrid");
grid.jqGrid({
url: 'VehicleMaster.aspx/GetLoadData',
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
ajaxSelectOptions: { type: "GET" },
jsonReader: {
repeatitems: false,
root: function(obj) {
return JSON.parse(obj.d);
}
},
loadonce: true,
sortable: true,
shrinkToFit: false,
autowidth: true,
rowNum: 25,
rowList: [15, 25, 50, 75, 100],
viewsortcols: [true, 'vertical', true],
pager: '#pager',
pgtext: "Page from {0} to {1}",
styleUI: 'Bootstrap',
height: $(window).height() - (343), //DYNAMIC HEIGHT
loadComplete: function() {
$(this).find(" > tbody > tr.jqgrow:odd").addClass("altRowClassEven");
$(this).find(" > tbody > tr.jqgrow:even").addClass("altRowClassOdd");
},
colNames: gridColumnNames, //FROM BACKEND
colModel: [
{ label: 'Id', name: 'Id', width: 130, editable: false, hidden: true },
{ label: 'VehicleName', name: 'VehicleName', width: 130, editable: false },
{ label: 'PlateCode', name: 'PlateCode', editable: true, width: 100 },
{
label: 'PlateNo',
name: 'PlateNo',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{ label: 'Owner', name: 'Owner', editable: true, width: 100 },
{ label: 'Brand', name: 'Brand', editable: true, width: 100 },
{ label: 'Color', name: 'Color', editable: true, width: 100 },
{ label: 'Make', name: 'Make', editable: true, width: 100 },
{ label: 'Model', name: 'Model', editable: true, width: 100 },
{ label: 'YearModel', name: 'YearModel', editable: true, width: 100 },
{
label: 'Seats',
name: 'Seats',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'Doors',
name: 'Doors',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'RegistrationDate',
name: 'RegistrationDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
//$(domElem).inputmask('99/99/9999');
}
}
},
{
label: 'RegistrationExpiry',
name: 'RegistrationExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'ChassisNo', name: 'ChassisNo', editable: true, width: 100 },
{ label: 'EngineNo', name: 'EngineNo', editable: true, width: 130 },
{ label: 'TrafficFileNo', name: 'TrafficFileNo', editable: true, width: 130 },
{ label: 'VehicleType', name: 'VehicleType', editable: true, width: 130 },
{ label: 'InsuranceCompany', name: 'InsuranceCompany', editable: true, width: 160 },
{
label: 'InsuranceDate',
name: 'InsuranceDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'InsuranceExpiry',
name: 'InsuranceExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'PlateIssueDate',
name: 'PlateIssueDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'Department', name: 'Department', editable: true, width: 130 },
{ label: 'Description', name: 'Description', editable: true, width: 130 },
{
label: 'Column1',
name: 'Column1',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column2',
name: 'Column2',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column3',
name: 'Column3',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column4',
name: 'Column4',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column5',
name: 'Column5',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column6',
name: 'Column6',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column7',
name: 'Column7',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column8',
name: 'Column8',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column9',
name: 'Column9',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column10',
name: 'Column10',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
}
],
multiselect: false,
cellEdit: true,
hiddengrid: false,
loadtext: 'Loading Data...',
sortascimg: 'sort_asc.gif',
sortdescimg: 'sort_desc.gif',
cellsubmit: 'clientArray',
viewrecords: true,
beforeSelectRow: function(rowid) {
console.log(rowid);
if (typeof selectedRows[0] !== "undefined") {
updateSelectedRow(selectedRows[selectedRows.length - 1]);
console.log(selectedRows[selectedRows.length - 1]);
}
selectedRows.push(rowid);
}
});
Below is the code for live search.
$("#globalSearchText").keyup(function() {
var rules = [],
i,
cm,
postData = grid.jqGrid("getGridParam", "postData"),
colModel = grid.jqGrid("getGridParam", "colModel"),
searchText = $("#globalSearchText").val(),
l = colModel.length;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
$.extend(postData, {
filters: {
groupOp: "OR",
rules: rules
}
});
Kindly guide me to resolve this. Thanks
