Working With JQX Grid With Filtering And Sorting And Searching
Introduction
We have all worked with JQ Grid. Today I got a requirement to implement JQWidget JQX Grid in my web application. Here I will explain how to implement JQX Grid in our application.
Download the needed files
JQX Grid With Filtering And Sorting
This article has been selected as Asp.Net Community Article of the Day Tuesday, December 30, 2014
(Working with JQX Grid with Filtering and Sorting and Searching)
What you must know
jQuery : What is jQuery?
JavaScript : JavaScript Tutorial
CSS 3 : CSS3 Introduction
HTML : HTML(5) Tutorial
DOM Manipulations in jQuery : jQuery â DOM Manipulation Methods
Background
We can implement the JQX Grid in MVC and in our web application. You can find the demo here: jqxGrid.
You can download the necessary file from http://www.jqwidgets.com/download/.
What made me choose JQX Grid
What made me choose JQX Grid? The answer is simple. We have so many client-side grid providers (JQGrid, Telerik, JQX and so on). If you are not aware of those, please have a look at:http://www.sitepoint.com/10-jquery-grids/
But for my requirements the client needs a toggle panel in which the filtering conditions occur. When I searched, JQX Grid has the best performance. (Some others support the same features, but they were a little slow.)
Using the code
There is a procedure we must follow to implement the JQX in our application.
Step 1
Download all the necessary files.
Step 2
Create a new web application.
Step 3
Add the selected folders to your application.
Step 4
Add a new page.
[html]
<!DOCTYPE html>
<html lang=âenâ>
<head>
</head>
<body >
</body>
</html>
[/html]
Step 5
Add the style sheets and necessary JavaScript files.
[html]
<link rel=âstylesheetâ href=âjqwidgets/styles/jqx.base.cssâ type=âtext/cssâ />
<script type=âtext/javascriptâ src=âscripts/jquery-1.11.1.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/jqxlistbox.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxdropdownlist.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxmenu.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxgrid.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=âjqwidgets/jqxgrid.selection.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxpanel.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxcheckbox.jsâ></script>
<script type=âtext/javascriptâ src=âscripts/demos.jsâ></script>
[/html]
(Make sure that you add the JavaScript files in order.)
Step 6
Create the DOM elements in which you want to show the JQX Grid.
[html]
<div id=âjqxWidgetâ style=âfont-size: 13px; font-family: Verdana; float: left;â>
<div id=âjqxgridâ>
</div>
</div>
[/html]
Step 7
Generate some dynamic JSON data so that you can easily generate the JQX Grid. You can get the data from the database and convert it to JSON. If you are unfamiliar with how to convert JSON then you can get it here: Json.NET 6.0.6.
If you are not aware of how to add the newtonsoft and use it then please see this video. And please dont forget to rate his video. He has done good a job :).
JSON Serialization and DeSerialization
Here I am generating data dynamically in a JavaScript file. Please find the generatedata.js file in the bundle of the JQX Grid. Please add this to your script section.
[js]
<script src=âgeneratedata.jsâ type=âtext/javascriptâ></script>
[/js]
If you go into the generatedata.js, you can see a function generatedata, that is for creating the data (JSON array) dynamically .
[js]
function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == #ff0000) rowscount = 100;
var firstNames =
[
âAndrewâ, âNancyâ, âShelleyâ, âReginaâ, âYoshiâ, âAntoniâ, âMayumiâ, âIanâ, âPeterâ, âLarsâ, âPetraâ, âMartinâ, âSvenâ, âElioâ, âBeateâ, âCherylâ, âMichaelâ, âGuyleneâ
];
var lastNames =
[
âFullerâ, âDavolioâ, âBurkeâ, âMurphyâ, âNagaseâ, âSaavedraâ, âOhnoâ, âDevlingâ, âWilsonâ, âPetersonâ, âWinklerâ, âBeinâ, âPetersenâ, âRossiâ, âVileidâ, âSaylorâ, âBjornâ, âNodierâ
];
var productNames =
[
âBlack Teaâ, âGreen Teaâ, âCaffe Espressoâ, âDoubleshot Espressoâ, âCaffe Latteâ, âWhite Chocolate Mochaâ, âCaramel Latteâ, âCaffe Americanoâ, âCappuccinoâ, âEspresso Truffleâ, âEspresso con Pannaâ, âPeppermint Mocha Twistâ
];
var priceValues =
[
â2.25â, â1.5â, â3.0â, â3.3â, â4.5â, â3.6â, â3.8â, â2.5â, â5.0â, â1.75â, â3.25â, â4.0â
];
for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row[âidâ] = i;
row[âavailableâ] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row[âavailableâ] = i % random == 0 ? null : false;
}
}
row[âfirstnameâ] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[âlastnameâ] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[ânameâ] = row[âfirstnameâ] + â â + row[âlastnameâ];
row[âproductnameâ] = productNames[productindex];
row[âpriceâ] = price;
row[âquantityâ] = quantity;
row[âtotalâ] = price * quantity;
var date = new Date();
date.setFullYear(2014, Math.floor(Math.random() * 12), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row[âdateâ] = date;
data[i] = row;
}
return data;
}
[/js]
Step 8
Now here is the main part. Add the main code to your script tag in the page. Here we are appending the Grid to the element that has the id jqxgrid.
[js]
<script type=âtext/javascriptâ>
$(document).ready(function () {
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{ name: âfirstnameâ, type: âstringâ },
{ name: âlastnameâ, type: âstringâ },
{ name: âproductnameâ, type: âstringâ },
{ name: âdateâ, type: âdateâ },
{ name: âquantityâ, type: ânumberâ }
],
datatype: âarrayâ
};
var addfilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = âBeateâ;
var filtercondition = âcontainsâ;
var filter1 = filtergroup.createfilter(âstringfilterâ, filtervalue, filtercondition);
filtervalue = âAndrewâ;
filtercondition = âcontainsâ;
var filter2 = filtergroup.createfilter(âstringfilterâ, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$(â#jqxgridâ).jqxGrid(âaddfilterâ, âfirstnameâ, filtergroup);
// apply the filters.
$(â#jqxgridâ).jqxGrid(âapplyfiltersâ);
}
var dataAdapter = new $.jqx.dataAdapter(source);
$(â#jqxgridâ).jqxGrid(
{
width: 850,
source: dataAdapter,
filterable: true,
sortable: true,
autoshowfiltericon: true,
ready: function () {
addfilter();
var localizationObject = {
filterstringcomparisonoperators: [âcontainsâ, âdoes not containâ],
// filter numeric comparison operators.
filternumericcomparisonoperators: [âless thanâ, âgreater thanâ],
// filter date comparison operators.
filterdatecomparisonoperators: [âless thanâ, âgreater thanâ],
// filter bool comparison operators.
filterbooleancomparisonoperators: [âequalâ, ânot equalâ]
}
$(â#jqxgridâ).jqxGrid(âlocalizestringsâ, localizationObject);
},
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = [âCONTAINSâ, âDOES_NOT_CONTAINâ];
var numericcomparisonoperators = [âLESS_THANâ, âGREATER_THANâ];
var datecomparisonoperators = [âLESS_THANâ, âGREATER_THANâ];
var booleancomparisonoperators = [âEQUALâ, âNOT_EQUALâ];
switch (type) {
case âstringfilterâ:
return stringcomparisonoperators;
case ânumericfilterâ:
return numericcomparisonoperators;
case âdatefilterâ:
return datecomparisonoperators;
case âbooleanfilterâ:
return booleancomparisonoperators;
}
},
updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
columnfilter, filtertype, filterconditions) {
var index1 = 0;
var index2 = 0;
if (columnfilter != null) {
var filter1 = columnfilter.getfilterat(0);
var filter2 = columnfilter.getfilterat(1);
if (filter1) {
index1 = filterconditions.indexOf(filter1.comparisonoperator);
var value1 = filter1.filtervalue;
filterinputfield1.val(value1);
}
if (filter2) {
index2 = filterconditions.indexOf(filter2.comparisonoperator);
var value2 = filter2.filtervalue;
filterinputfield2.val(value2);
}
}
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
},
columns: [
{ text: âFirst Nameâ, datafield: âfirstnameâ, width: 200 },
{ text: âLast Nameâ, datafield: âlastnameâ, width: 200 },
{ text: âProductâ, datafield: âproductnameâ, width: 180 },
{ text: âOrder Dateâ, datafield: âdateâ, width: 160, cellsformat: âdd-MMMM-yyyyâ },
{ text: âQuantityâ, datafield: âquantityâ, cellsalign: ârightâ }
]
});
$(â#eventsâ).jqxPanel({ width: 300, height: 80});
$(â#jqxgridâ).on(âfilterâ, function (event) {
$(â#eventsâ).jqxPanel(âclearcontentâ);
var filterinfo = $(â#jqxgridâ).jqxGrid(âgetfilterinformationâ);
var eventData = âTriggered âfilterâ eventâ;
for (i = 0; i < filterinfo.length; i++) {
var eventData = âFilter Column: â + filterinfo[i].filtercolumntext;
$(â#eventsâ).jqxPanel(âprependâ, â<div style=âmargin-top: 5px;â>â + eventData + â</div>â);
}
});
$(â#clearfilteringbuttonâ).jqxButton({ theme: theme });
$(â#filterbackgroundâ).jqxCheckBox({ checked: true, height: 25});
$(â#filtericonsâ).jqxCheckBox({ checked: false, height: 25});
// clear the filtering.
$(â#clearfilteringbuttonâ).click(function () {
$(â#jqxgridâ).jqxGrid(âclearfiltersâ);
});
// show/hide filter background
$(â#filterbackgroundâ).on(âchangeâ, function (event) {
$(â#jqxgridâ).jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$(â#filtericonsâ).on(âchangeâ, function (event) {
$(â#jqxgridâ).jqxGrid({ autoshowfiltericon: !event.args.checked });
});
});
</script>
[/js]
Step 9: Now build and run your code, you will get output as in the following:
Have a happy coding đ
History
First version on: 13-Oct-2014 10:30 PM.