Advanced JQX Grid With All Functionality
In this article we will see how we can implement or create a JQWidget’s JQX grid in our application. It is a client side grid which is good in performance and speed. We will see the advanced properties of a JQWidget JQX gris in this article.
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 find out the articles related to JQWidget category here: http://sibeeshpassion.com/category/products/jqwidgets/
If you need to bind the data source dynamically, please read here: http://sibeeshpassion.com/Convert-CellSet-to-HTML-table-And-From-HTML-To-Json-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
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://sibeeshpassion.com/working-with-jqx-grid-with-filtering-and-sorting/ ).
What is 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
[html]
<!DOCTYPE html>
<html lang=âenâ>
<head>
<title></title>
</head>
<body>
</body>
</html>
[/html]
Include the extra UI elements
[html]
<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]
Include Reference
[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>
<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>
[/html]
What we add new?
[js]
<script src=âjqwidgets/jqxgrid.pager.jsâ type=âtext/javascriptâ></script>
[/js]
This script is for adding the functionality of Paging :). You can add the functionality to the grid as
[js]
pageable: true.
[/js]
And if you want different stylish paging then you can set that like this:
[js]
pagermode: âsimpleâ,
[/js]
[js]
<script src=âjqwidgets/jqxgrid.edit.jsâ type=âtext/javascriptâ></script>
[/js]
This script is for adding the functionality of Editing :). You can add the functionality to the grid as
[js]
editable: true.
[/js]
[js]
<script src=âjqwidgets/jqxgrid.columnsresize.jsâ type=âtext/javascriptâ></script>
<script src=âjqwidgets/jqxgrid.columnsreorder.jsâ type=âtext/javascriptâ></script>
[/js]
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.
[js]
<script src=âjqwidgets/jqxgrid.export.jsâ type=âtext/javascriptâ></script>
<script src=âjqwidgets/jqxdata.export.jsâ type=âtext/javascriptâ></script>
[/js]
When you want to export your grid to any formate, please include those scripts. You can implement the same just like the following:
[js]
$(â#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
});
[/js]
If you want to print your grid:
[js]
$(â#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();
});
[/js]
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:
[xml]
<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>
[/xml]
Please find the orderdetailsextended.xml from the source.
Implementing a JQX GRid with advanced features
[js]
<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>
[/js]
In the preceding script you can see a code part as follows:
[js]
columngroups:
[
{ text: âProduct Detailsâ, align: âcenterâ, name: âProductDetailsâ },
{ text: âOrder Detailsâ, parentgroup: âProductDetailsâ, align: âcenterâ, name: âOrderDetailsâ },
{ text: âLocationâ, align: âcenterâ, name: âLocationâ }
]
[/js]
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:
[js]
{ text: âNameâ, columngroup: âProductDetailsâ, cellsalign: âcenterâ, align: âcenterâ, datafield: âProductNameâ, width: 120 }
[/js]
You can specify this as needed and your data source.Now this is how our page looks like.
[html]
<!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>
[/html]
That is all. We have successfully created a wonderful JQX Grid as in the following:
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?
[js]
showtoolbar: true,
[/js]
Add that line to your JQX grid implementation. Next we need to append the UI elements to the tool bar, right?
[js]
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);
}
[/js]
Add the preceding function also. đ Now this is how your JQX Grid Implementation must be:
[js]
$(â#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â }
]
});
[/js]
Now your output looks like the following:
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
[js]
<link href=âstyles/jquery.sharer.cssâ rel=âstylesheetâ type=âtext/cssâ />
<script src=âscripts/jquery.sharer.jsâ type=âtext/javascriptâ></script>
[/js]
Include the script to your page
[js]
$(â.social-buttonsâ).sharer();
[/js]
Add a div where you can see the share buttons
[js]
<div class=âsocial-buttonsâ style=âposition: relative;z-index: 1000;â></div>
[/js]
Well, thatâs all; you have now done everything. We can now see the page as,
To set the page size add the following line to your grid settings:
[js]
pagesize: 50,
[/js]
To set the custom pagesize options add the following line to your grid settings:
[js]
pagesizeoptions: [â5âČ,â10â,â15â,â20â,â30â,â40â,â50â],
[/js]
To allow resizing of the columns add the following line to your grid settings:
[js]
columnsresize: true,
[/js]
To allow column re-ordering options add the following line to your grid settings:
[js]
columnsreorder: true,
[/js]
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:
[js]
filtermode: âexcelâ,
[/js]
Then you will get a filtering option as follows:
To enable the tooltip add the following line to your grid settings
[js]
enabletooltips: true,
[/js]
To apply themes add the following line to your grid settings
[js]
theme: âmetroâ,
[/js]
Please be noted that you must include the style sheet accordingly, In this case you have to include the following
[html]
<link href=â~/jqwidgets/styles/jqx.metro.cssâ rel=âstylesheetâ />
[/html]
You can find so many CSS in jqwidgets/styles folder.
To enable auto height add the following line to your grid settings
[js]
autoheight: true,
[/js]
To show the default filter icon always add the following line to your grid settings
[js]
autoshowfiltericon: false,
[/js]
Happy Coding đ
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