Below code displays filterable textboxes, but when I type “abc” into ‘Sid textbox’, the records are not filtered. Could someone please provide some insights, please?
Please let me know as soon as possible. Thanks very much!!
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = new Array();
var jsonObject = { "contactList":[
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
{"age":1,"SId":"S1234567","gender":"male"},
], "totalrecords":18};
//alert("jsonObject.totalrecords : " + jsonObject.totalrecords);
// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
//alert(startindex + " " + endindex);
var row = {};
row["age"] = jsonObject.contactList[i].age;
row["gender"] = jsonObject.contactList[i].gender;
row["SId"] = jsonObject.contactList[i].SId;
data[i] = row;
}
return data;
}
// sortcolumn: 'age',
// sortdirection: 'asc',
var source =
{
datatype: "array",
localdata: {},
totalrecords: jsonObject.totalrecords,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
//alert("inside updaterow()");
commit(true);
},
};
// load virtual data.
var rendergridrows = function (params) {
//alert("rendergridrows : " + source.totalrecords);
//alert("rendergridrows : " + params.startindex + " " + params.endindex);
if(params.endindex >= source.totalrecords) params.endindex = source.totalrecords;
if(params.endindex == params.startindex) params.startindex = params.startindex - 1;
//alert("rendergridrows : " + params.startindex + " " + params.endindex);
var data = generatedata(params.startindex, params.endindex);
return data;
}
var totalcolumnrenderer = function (row, column, cellvalue) {
var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
}
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 670,
autoheight: true,
source: dataAdapter,
theme: theme,
virtualmode: true,
pageable: true,
selectionmode: 'multiplerowsextended',
sortable: true,
showfilterrow: true,
filterable: true,
rendergridrows: rendergridrows,
columns: [
{ text: 'Age', datafield: 'age', width: 50 },
{ text: 'SId', datafield: 'SId', width: 120 },
{ text: 'Gender', datafield: 'gender', width: 80 },
]
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>
In virtual mode, the Grid’s data is loaded on demand in the Grid, so the local filtering will not work as there are records only in the view. See this sample for filtering implementation in virtual mode: serverfiltering_paging_and_sorting.htm