Introduction
We all worked with JQ Grid. Today i got a requirement of implementing JQX Grid in my web application. If you are new to JQ Grid you can read here : http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET . Here i am gonna explain the steps to implement the JQX Grid in our application.
What you must know?
- Jquery : http://jquery.com/
- Javascript : http://www.w3schools.com/js/
- CSS 3 : http://www.w3schools.com/css/css3_intro.asp
- HTML : http://www.w3schools.com/html/
- DOM Manipulations in JQuery : http://www.tutorialspoint.com/jquery/jquery-dom.htm
Background
We can implement the JQX Grid in MVC and in our web application. You can find the demo here : http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filterconditions.htm .
You can download the needed file from http://www.jqwidgets.com/download/ .
What made me to choose JQX Grid?
The answer is simple. We have so many clien side grid providers (JQGrid,Telerik,JQX etc..... If you are not aware of those , please have a look at here http://www.sitepoint.com/10-jquery-grids/ . But in my requirement clent needs a toggle panel in which the filtering conditions occurs. When i searched , JQX Grid was the one with better performance. (Some others also supports the same features, but it was little bit slow.).
Using the code
There are some steps that we must follow to implement the JQX in our application.
Step 1: Download all the needed files
Step 2: Create a new web application .
Step 3: Add the selected folders to your application
Step 4: Add a new page
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body >
</body>
</html>
Step 5: Add the stylesheets and needed js files .
<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>
(Make sure that you add the js files in order)
Step 6: Create the DOM elements in which you want to show the JQX Grid
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
</div>
Step 7: Generate some dynamic json data , so that you can generate the JQX Grid easily . You can take the data from the database and convert it to the JSON. If you are new to the json converting ways, you can get it here: https://www.nuget.org/packages/newtonsoft.json/
If you are not aware of how to add the newtonsoft and use, please see this video. And please dont forget to rate his video. He has done good job :) .
https://www.youtube.com/watch?v=76blDatESaA
Here I am generating data dynamically in JS file. Please find the generatedata.js file in the bundle of JQX Grid. Please add this to your script section.
<script src="generatedata.js" type="text/javascript"></script>
If you go into the generatedata.js, you can see a function generatedata, which is for creating the datas
(Json)dynamically .
function generatedata(rowscount, hasNullValues) {
var data = new Array();
if (rowscount == undefined) 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;
}
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 which has id as jqxgrid.
<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);
$("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
$("#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'],
filternumericcomparisonoperators: ['less than', 'greater than'],
filterdatecomparisonoperators: ['less than', 'greater than'],
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});
$('#clearfilteringbutton').click(function () {
$("#jqxgrid").jqxGrid('clearfilters');
});
$('#filterbackground').on('change', function (event) {
$("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
$('#filtericons').on('change', function (event) {
$("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
});
});
</script>
Step 9: Now build and run your code , you will get output as the following .
Have a happy coding :)
History
First version on: 13-Oct-2014 10:30 PM.
