Advanced JQX Grid With All Functionality

Introduction

This article has been selected as Asp.Net Community Article of the Day Sunday January 11 ,2015.

If you are new to the term JQX Grid then please read here:Working with jQXGrid

If you need to bind the data source dynamically, please read here: Convert CellSet to HTML Table and From HTML to JSON and to Array

For the past days I have been working on JQX Grid. Now I will share that Grid with all the functionality.

Download the source code

Advanced JQXGrid

Background

In my previous article, one member asked for some functionality. So I thought of sharing that info. Please note that I have not implemented all the functionalities. I have selected some important features that we may use in our programming life.

Using the code

As we discussed in the previous articles, we need a web application with all the contents of JQX Widgets (http://www.c-sharpcorner.com/UploadFile/65794e/working-with-jqx-grid-with-filtering-and-sorting983/ ).

JQX Grid

jqxGrid is powerful datagrid widget built entirely with open web standards. It offers rich functionality, easy to use APIs and works across devices and browsers. jqxGrid delivers advanced data visualization features and built-in support for client and server-side paging, editing, sorting and filtering.

What we need

Simple HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>

Include the extra UI elements

<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
<div style='margin-top: 20px;'>
<div style='float: left;'>
<input type="button" value="Export to Excel" id='excelExport' />
<br /><br />
<input type="button" value="Export to XML" id='xmlExport' />
</div>
<div style='margin-left: 10px; float: left;'>
<input type="button" value="Export to CSV" id='csvExport' />
<br /><br />
<input type="button" value="Export to TSV" id='tsvExport' />
</div>
<div style='margin-left: 10px; float: left;'>
<input type="button" value="Export to HTML" id='htmlExport' />
<br /><br />
<input type="button" value="Export to JSON" id='jsonExport' />
</div>
<div style='margin-left: 10px; float: left;'>
<input type="button" value="Print" id='print' />
</div>
</div>
</div>
</body>

Include Links

<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>
<script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
<script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>

What we add new

<script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>

This script is for adding the functionality of Paging :). You can add the functionality to the grid as pageable: true.

And if you want different stylish paging then you can set that like this:

pagermode: 'simple',

<script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>

This script is for adding the functionality of Editing :). You can add the functionality to the grid as editable: true.

<script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>

These scripts are for adding the functionality of Hierarchy columns. If we want to separate the data in the column header then you can include the following scripts.

<script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
<script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>

When you want to export your grid to any formate, please include those scripts. You can implement the same just like the following:

$("#excelExport").jqxButton({ theme: theme }); //Assign styles to the button
$("#xmlExport").jqxButton({ theme: theme });
$("#csvExport").jqxButton({ theme: theme });
$("#tsvExport").jqxButton({ theme: theme });
$("#htmlExport").jqxButton({ theme: theme });
$("#jsonExport").jqxButton({ theme: theme });
$("#excelExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid'); // To export to xlx
});
$("#xmlExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid'); //To export to XML
});
$("#csvExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid'); // To export to csv
});
$("#tsvExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid'); // To export to tsv
});
$("#htmlExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid'); // To export to html
});
$("#jsonExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid'); // To export to JSON
});

If you want to print your grid:

$("#print").jqxButton();
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});

Now we need data to populate the grid, right? Since we are familiar with a simple header JQX Grid from the previous article, now we can go for a hierarchy column grid. So let's say we have XML as follows:

<DATA>
<ROW>
<ProductID>72</ProductID>
<SupplierName>Formaggi Fortini s.r.l.</SupplierName>
<Quantity>24 - 200 g pkgs.</Quantity>
<Freight>32.3800</Freight>
<OrderDate>1996-07-04 00:00:00</OrderDate>
<OrderAddress>59 rue de l-Abbaye</OrderAddress>
<Price>34.8000</Price>
<City>Ravenna</City>
<Address>Viale Dante, 75</Address>
<ProductName>Mozzarella di Giovanni</ProductName>
</ROW>
<ROW>
<ProductID>42</ProductID>
<SupplierName>Leka Trading</SupplierName>
<Quantity>32 - 1 kg pkgs.</Quantity>
<Freight>32.3800</Freight>
<OrderDate>1996-07-04 00:00:00</OrderDate>
<OrderAddress>59 rue de l-Abbaye</OrderAddress>
<Price>14.0000</Price>
<City>Singapore</City>
<Address>471 Serangoon Loop, Suite #402</Address>
<ProductName>Singaporean Hokkien Fried Mee</ProductName>
</ROW>
<ROW>
........
</ROW>
<ROW>
........
</ROW>
</DATA>

Please find the orderdetailsextended.xml from the source.

Implementing a JQX GRid with advanced features.

<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'SupplierName', type: 'string' },
{ name: 'Quantity', type: 'number' },
{ name: 'OrderDate', type: 'date' },
{ name: 'OrderAddress', type: 'string' },
{ name: 'Freight', type: 'number' },
{ name: 'Price', type: 'number' },
{ name: 'City', type: 'string' },
{ name: 'ProductName', type: 'string' },
{ name: 'Address', type: 'string' }
],
url: 'orderdetailsextended.xml',
root: 'DATA',
record: 'ROW'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
// create jqxgrid.
$("#jqxgrid").jqxGrid(
{
width: 900,
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columns: [
{ text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
{ text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
{ text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
{ text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
{ text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
{ text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
{ text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
{ text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
{ text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
],
columngroups:
[
{ text: 'Product Details', align: 'center', name: 'ProductDetails' },
{ text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
{ text: 'Location', align: 'center', name: 'Location' }
]
});
$("#excelExport").jqxButton({ theme: theme });
$("#xmlExport").jqxButton({ theme: theme });
$("#csvExport").jqxButton({ theme: theme });
$("#tsvExport").jqxButton({ theme: theme });
$("#htmlExport").jqxButton({ theme: theme });
$("#jsonExport").jqxButton({ theme: theme });
$("#excelExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
});
$("#xmlExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
});
$("#csvExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
});
$("#tsvExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
});
$("#htmlExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
});
$("#jsonExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
});
$("#print").jqxButton();
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
});
</script>

In the preceding script you can see a code part as follows:

columngroups:
[
{ text: 'Product Details', align: 'center', name: 'ProductDetails' },
{ text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
{ text: 'Location', align: 'center', name: 'Location' }
]

This is where the column grouping is happening. And if you want to add a column under this column you can set that as follows:

{ text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 }

You can specify this as needed and your datasource.

Now this is how our page looks like.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<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>
<script src="generatedata.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>
<script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
<script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "xml",
datafields: [
{ name: 'SupplierName', type: 'string' },
{ name: 'Quantity', type: 'number' },
{ name: 'OrderDate', type: 'date' },
{ name: 'OrderAddress', type: 'string' },
{ name: 'Freight', type: 'number' },
{ name: 'Price', type: 'number' },
{ name: 'City', type: 'string' },
{ name: 'ProductName', type: 'string' },
{ name: 'Address', type: 'string' }
],
url: 'orderdetailsextended.xml',
root: 'DATA',
record: 'ROW'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
// create jqxgrid.
$("#jqxgrid").jqxGrid(
{
width: 900,
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columns: [
{ text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
{ text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
{ text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
{ text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
{ text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
{ text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
{ text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
{ text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
{ text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
],
columngroups:
[
{ text: 'Product Details', align: 'center', name: 'ProductDetails' },
{ text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
{ text: 'Location', align: 'center', name: 'Location' }
]
});
$("#excelExport").jqxButton({ theme: theme });
$("#xmlExport").jqxButton({ theme: theme });
$("#csvExport").jqxButton({ theme: theme });
$("#tsvExport").jqxButton({ theme: theme });
$("#htmlExport").jqxButton({ theme: theme });
$("#jsonExport").jqxButton({ theme: theme });
$("#excelExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
});
$("#xmlExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
});
$("#csvExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
});
$("#tsvExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
});
$("#htmlExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
});
$("#jsonExport").click(function () {
$("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');
});
$("#print").jqxButton();
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
<div style='margin-top: 20px;'>
<div style='float: left;'>
<input type="button" value="Export to Excel" id='excelExport' />
<br /><br />
<input type="button" value="Export to XML" id='xmlExport' />
</div>
<div style='margin-left: 10px; float: left;'>
<input type="button" value="Export to CSV" id='csvExport' />
<br /><br />
<input type="button" value="Export to TSV" id='tsvExport' />
</div>
<div style='margin-left: 10px; float: left;'>
<input type="button" value="Export to HTML" id='htmlExport' />
<br /><br />
<input type="button" value="Export to JSON" id='jsonExport' />
</div>
<div style='margin-left: 10px; float: left;'>
<input type="button" value="Print" id='print' />
</div>
</div>
</div>
</body>
</html>

That is all. We have successfully created a wonderful JQX Grid as in the following:

JOX Grid

Now you may think, why are those export buttons outside? It looks different, right? Now we can work on it. In the JQX Grid there is an option called showtoolbar, by setting this to true we can have a toolbar along with the grid. There we can bind all of these buttons if you want. So shall we start?

showtoolbar: true,

Add that line to your JQX grid implementation. Next we need to append the UI elements to the tool bar, right?

rendertoolbar:function (toolbar) {
var me = this;
var container = $("<div ></div>");
var input = $('<div id="excelExport" style="background-color: #555555;float: left; font-
weight: bold;line-height: 28px; min-
width: 80px;padding: 3px 5px 3px 10px;color: #fff; ">Excel</div>
div style="background-color: #555555;float: left; font-weight: bold;line-
height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-
left: 3px;" id="print" >Print</div></div>');
toolbar.append(container);
container.append(input);
}

Add the preceding function also. :) Now this is how your JQX Grid Implementation must be:

$("#jqxgrid").jqxGrid(
{
width: 900,
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $("<div ></div>");
var input = $('<div id="div1" style="background-color: #555555;float: left; font-weight: bold;line-
height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; ">Your First Div</div>
<div style="background-color: #555555;float: left; font-weight: bold;line-height: 28px; min-
width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-
left: 3px;" id="Div2" >Your Second Div</div></div>');
toolbar.append(container);
container.append(input);
},
columns: [
{ text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
{ text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName'
, width: 120 },
{ text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'cente
r', align: 'center', width: 80 },
{ text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center',
align: 'center', width: 100 },
{ text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', da
tafield: 'OrderDate', width: 100 },
{ text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'Order
Address', width: 100 },
{ text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsa
lign: 'center', width: 70 },
{ text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width
: 120 },
{ text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
],
columngroups: [
{ text: 'Product Details', align: 'center', name: 'ProductDetails' },
{ text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
{ text: 'Location', align: 'center', name: 'Location' }
]
});

Now your output looks like the following:

JOX Grid table 4

What if you want to share this Grid with your friends? For that we have a jQuery share pluggin. Minimal jQuery Plugin For Social Share Buttons - Sharer.

Include the following files from the downloded rar from the preceding link.

jquery.sharer.css
jquery.sharer.js
sharer.png

<link href="styles/jquery.sharer.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.sharer.js" type="text/javascript"></script>

Include the script to your page.

$(".social-buttons").sharer();

Add a div where you can see the share buttons.

<div class="social-buttons" style="position: relative;z-index: 1000;"></div>

Well, that's all; you have now done everything. We can now see the page as:

JOX Grid table 5

To set the page size add the following line to your grid settings:

pagesize: 50,

To set the custom pagesize options add the following line to your grid settings:

pagesizeoptions: ['5','10','15','20','30','40','50'],

To allow resizing of the columns add the following line to your grid settings:

columnsresize: true,

To allow column re-ordering options add the following line to your grid settings:

columnsreorder: true,

Be sure that you added the jqxgrid.columnsreorder.js JavaScript file.

To allow an Excel-like filter add the following line to your grid settings:

filtermode: 'excel',

Then you will get a filtering option as follows:

JOX Grid table 6

To enable the tooltip add the following line to your grid settings

enabletooltips: true,

To apply themes add the following line to your grid settings

theme: 'metro',

Please be noted that you must include the style sheet accordingly, In this case you have to include the following

<link href="~/jqwidgets/styles/jqx.metro.css" rel="stylesheet" />

You can find so many CSS in jqwidgets/styles folder.

To enable auto height add the following line to your grid settings

autoheight: true,

To show the default filter icon always add the following line to your grid settings

autoshowfiltericon: false,

Please see this article in my blog here

History

First Version: 20-Oct-2014

Second Version: 23-Oct-2014

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

24 Comments

Join the conversation! Your thoughts help the community grow.

Rakesh Kumar5y ago
I am trying To download AdvancedJQXGrid.zip and content not getting download
Sibeesh Venu10y ago
Sr Karthiga Thanks
Sr Karthiga10y ago
good one
Sr Karthiga10y ago
Nice explanation
Sibeesh Venu11y ago
Rupali Shinde Thanks lot
Rupali Shinde11y ago
really nice article, i found 1 new way to have grid control as developer ..
Sibeesh Venu11y ago
Sumit Jolly Thanks a lot :)
Guest User11y ago
Congratulations as your article is chosen as article of the day!!! Keep it up!
Sibeesh Venu11y ago
Anupam Singh Thanks a lot. I am glad you liked it.
Anupam Singh11y ago
nice article Sibeesh Venu
Sibeesh Venu11y ago
khargesh rajput Thank you
Khargesh Rajput11y ago
Thanks Bookmarked this
Sibeesh Venu11y ago
Dinesh Beniwal Wow thanks buddy
Dinesh Beniwal11y ago
Congratulations Sibeesh Venu Articles of the day on Asp.net
Sibeesh Venu11y ago
santosh tilak Please tell me which one use as back end!. Is it SQL or OLEDB?
Sibeesh Venu11y ago
santosh tilak If you are still looking for a solution to load from DB, I can help you with that.
Sibeesh Venu11y ago
santosh tilak You can have a look at this : http://www.c-sharpcorner.com/UploadFile/65794e/convert-cellset-to-html-table-and-from-html-to-json-and-to-a/
Sibeesh Venu11y ago
santosh tilak You mean you need to implement grid from DB data? If yes it is possible buddy. All you need is just an ajax function which returns data as json, or xml.
Sibeesh Venu11y ago
santosh tilak Thank you :)
santosh tilak11y ago
great article ,need to implement the data from database
Sibeesh Venu11y ago
Ramesh Thanks buddy.
Ramesh Maruthi11y ago
Awesome article bookmarked :)
Sibeesh Venu11y ago
Keyur Patel Thanks buddy :)
Keyur Patel11y ago
Good detail explanation on JQX Grid. Rock!!