Contribute
JQuery

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
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.        <title></title>     
  5.    </head>  
  6.    <body>      
  7.    </body>  
  8. </html>  
Include the extra UI elements
  1. <body class='default'>  
  2.     <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">  
  3.         <div id="jqxgrid"></div>  
  4.         <div style='margin-top: 20px;'>  
  5.             <div style='float: left;'>  
  6.                 <input type="button" value="Export to Excel" id='excelExport' />  
  7.                 <br /><br />  
  8.                 <input type="button" value="Export to XML" id='xmlExport' />  
  9.             </div>  
  10.             <div style='margin-left: 10px; float: left;'>  
  11.                 <input type="button" value="Export to CSV" id='csvExport' />  
  12.                 <br /><br />  
  13.                 <input type="button" value="Export to TSV" id='tsvExport' />  
  14.             </div>  
  15.             <div style='margin-left: 10px; float: left;'>  
  16.                 <input type="button" value="Export to HTML" id='htmlExport' />  
  17.                 <br /><br />  
  18.                 <input type="button" value="Export to JSON" id='jsonExport' />  
  19.             </div>  
  20.             <div style='margin-left: 10px; float: left;'>  
  21.                 <input type="button" value="Print" id='print' />  
  22.             </div>  
  23.         </div>  
  24.     </div>  
  25. </body>  
Include Links
  1. <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />  
  2.     <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>  
  3.     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>  
  4.     <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>  
  5.     <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>  
  6.     <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>  
  7.     <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>  
  8.     <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>  
  9.     <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>  
  10.     <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>  
  11.     <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>  
  12.     <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>  
  13.     <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>  
  14.     <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>  
  15.     <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>  
  16.     <script type="text/javascript" src="scripts/demos.js"></script>    
  17.     <script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>     
  18.     <script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>  
  19.     <script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>  
  20.     <script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>  
  21.     <script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>  
  22.     <script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>  
What we add new
  1. <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',
  1. <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.
  1. <script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>  
  2. <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.
  1. <script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>  
  2. <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:
  1. $("#excelExport").jqxButton({ theme: theme }); //Assign styles to the button   
  2.             $("#xmlExport").jqxButton({ theme: theme });  
  3.             $("#csvExport").jqxButton({ theme: theme });  
  4.             $("#tsvExport").jqxButton({ theme: theme });  
  5.             $("#htmlExport").jqxButton({ theme: theme });  
  6.             $("#jsonExport").jqxButton({ theme: theme });  
  7.             $("#excelExport").click(function () {  
  8.                 $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid'); // To export to xlx  
  9.             });  
  10.             $("#xmlExport").click(function () {  
  11.                 $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid'); //To export to XML  
  12.             });  
  13.             $("#csvExport").click(function () {  
  14.                 $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid'); // To export to csv  
  15.             });  
  16.             $("#tsvExport").click(function () {  
  17.                 $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid'); // To export to tsv  
  18.             });  
  19.             $("#htmlExport").click(function () {  
  20.                 $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid'); // To export to html  
  21.             });  
  22.             $("#jsonExport").click(function () {  
  23.                 $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid'); // To export to JSON  
  24.             });    
If you want to print your grid:
  1. $("#print").jqxButton();  
  2.   
  3.             $("#print").click(function () {  
  4.                 var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');  
  5.                 var newWindow = window.open('', '', 'width=800, height=500'),  
  6.                 document = newWindow.document.open(),  
  7.                 pageContent =  
  8.                     '<!DOCTYPE html>\n' +  
  9.                     '<html>\n' +  
  10.                     '<head>\n' +  
  11.                     '<meta charset="utf-8" />\n' +  
  12.                     '<title>jQWidgets Grid</title>\n' +  
  13.                     '</head>\n' +  
  14.                     '<body>\n' + gridContent + '\n</body>\n</html>';  
  15.                 document.write(pageContent);  
  16.                 document.close();  
  17.                 newWindow.print();  
  18.             });  
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:
  1. <DATA>  
  2.   
  3.     <ROW>  
  4.         <ProductID>72</ProductID>  
  5.         <SupplierName>Formaggi Fortini s.r.l.</SupplierName>  
  6.         <Quantity>24 - 200 g pkgs.</Quantity>  
  7.         <Freight>32.3800</Freight>  
  8.         <OrderDate>1996-07-04 00:00:00</OrderDate>  
  9.         <OrderAddress>59 rue de l-Abbaye</OrderAddress>  
  10.         <Price>34.8000</Price>  
  11.         <City>Ravenna</City>  
  12.         <Address>Viale Dante, 75</Address>  
  13.         <ProductName>Mozzarella di Giovanni</ProductName>  
  14.     </ROW>  
  15.   
  16.     <ROW>  
  17.         <ProductID>42</ProductID>  
  18.         <SupplierName>Leka Trading</SupplierName>  
  19.         <Quantity>32 - 1 kg pkgs.</Quantity>  
  20.         <Freight>32.3800</Freight>  
  21.         <OrderDate>1996-07-04 00:00:00</OrderDate>  
  22.         <OrderAddress>59 rue de l-Abbaye</OrderAddress>  
  23.         <Price>14.0000</Price>  
  24.         <City>Singapore</City>  
  25.         <Address>471 Serangoon Loop, Suite #402</Address>  
  26.         <ProductName>Singaporean Hokkien Fried Mee</ProductName>  
  27.     </ROW>  
  28.   
  29.     <ROW>  
  30.         ........  
  31.     </ROW>  
  32.   
  33.     <ROW>  
  34.        ........  
  35.     </ROW>  
  36.   
  37. </DATA>  
Please find the orderdetailsextended.xml from the source.

Implementing a JQX GRid with advanced features.
  1. <script type="text/javascript">  
  2.          $(document).ready(function () {  
  3.   
  4.              // prepare the data  
  5.              var source =  
  6.             {  
  7.                 datatype: "xml",  
  8.                 datafields: [  
  9.                      { name: 'SupplierName', type: 'string' },  
  10.                      { name: 'Quantity', type: 'number' },  
  11.                      { name: 'OrderDate', type: 'date' },  
  12.                      { name: 'OrderAddress', type: 'string' },  
  13.                      { name: 'Freight', type: 'number' },  
  14.                      { name: 'Price', type: 'number' },  
  15.                      { name: 'City', type: 'string' },  
  16.                      { name: 'ProductName', type: 'string' },  
  17.                      { name: 'Address', type: 'string' }  
  18.                 ],  
  19.                 url: 'orderdetailsextended.xml',  
  20.                 root: 'DATA',  
  21.                 record: 'ROW'  
  22.             };  
  23.              var dataAdapter = new $.jqx.dataAdapter(source, {  
  24.                  loadComplete: function () {  
  25.                  }  
  26.              });  
  27.              // create jqxgrid.  
  28.              $("#jqxgrid").jqxGrid(  
  29.             {  
  30.                 width: 900,  
  31.                 source: dataAdapter,  
  32.                 filterable: true,  
  33.                 sortable: true,    
  34.                 pageable: true,  
  35.                 autorowheight: true,  
  36.                 altrows: true,  
  37.                 columnsresize: true,  
  38.                 columns: [  
  39.                   { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },  
  40.                   { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },  
  41.                   { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },  
  42.                   { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },  
  43.                   { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },  
  44.                   { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },  
  45.                   { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },  
  46.                   { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },  
  47.                   { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }  
  48.                 ],  
  49.                 columngroups:  
  50.                 [  
  51.                   { text: 'Product Details', align: 'center', name: 'ProductDetails' },  
  52.                   { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },  
  53.                   { text: 'Location', align: 'center', name: 'Location' }  
  54.                 ]  
  55.             });  
  56.   
  57.             $("#excelExport").jqxButton({ theme: theme });  
  58.             $("#xmlExport").jqxButton({ theme: theme });  
  59.             $("#csvExport").jqxButton({ theme: theme });  
  60.             $("#tsvExport").jqxButton({ theme: theme });  
  61.             $("#htmlExport").jqxButton({ theme: theme });  
  62.             $("#jsonExport").jqxButton({ theme: theme });  
  63.             $("#excelExport").click(function () {  
  64.                 $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');  
  65.             });  
  66.             $("#xmlExport").click(function () {  
  67.                 $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');  
  68.             });  
  69.             $("#csvExport").click(function () {  
  70.                 $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');  
  71.             });  
  72.             $("#tsvExport").click(function () {  
  73.                 $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');  
  74.             });  
  75.             $("#htmlExport").click(function () {  
  76.                 $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');  
  77.             });  
  78.             $("#jsonExport").click(function () {  
  79.                 $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');  
  80.             });  
  81.             $("#print").jqxButton();  
  82.   
  83.             $("#print").click(function () {  
  84.                 var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');  
  85.                 var newWindow = window.open('', '', 'width=800, height=500'),  
  86.                 document = newWindow.document.open(),  
  87.                 pageContent =  
  88.                     '<!DOCTYPE html>\n' +  
  89.                     '<html>\n' +  
  90.                     '<head>\n' +  
  91.                     '<meta charset="utf-8" />\n' +  
  92.                     '<title>jQWidgets Grid</title>\n' +  
  93.                     '</head>\n' +  
  94.                     '<body>\n' + gridContent + '\n</body>\n</html>';  
  95.                 document.write(pageContent);  
  96.                 document.close();  
  97.                 newWindow.print();  
  98.             });  
  99.          });  
  100.     </script>  
In the preceding script you can see a code part as follows:
  1. columngroups:  
  2.                [  
  3.                   { text: 'Product Details', align: 'center', name: 'ProductDetails' },  
  4.                   { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },  
  5.                   { text: 'Location', align: 'center', name: 'Location' }  
  6.                ]  
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:
  1. { 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.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <title></title>  
  5.     <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />  
  6.     <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>  
  7.     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>  
  8.     <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>  
  9.     <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>  
  10.     <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>  
  11.     <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>  
  12.     <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>  
  13.     <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>  
  14.     <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>  
  15.     <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>  
  16.     <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>  
  17.     <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>  
  18.     <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>  
  19.     <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>  
  20.     <script type="text/javascript" src="scripts/demos.js"></script>    
  21.     <script src="generatedata.js" type="text/javascript"></script>  
  22.   
  23.     <script src="jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>     
  24.     <script src="jqwidgets/jqxgrid.edit.js" type="text/javascript"></script>  
  25.     <script src="jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>  
  26.     <script src="jqwidgets/jqxgrid.columnsreorder.js" type="text/javascript"></script>  
  27.     <script src="jqwidgets/jqxgrid.export.js" type="text/javascript"></script>  
  28.     <script src="jqwidgets/jqxdata.export.js" type="text/javascript"></script>  
  29.      <script type="text/javascript">  
  30.          $(document).ready(function () {  
  31.   
  32.              // prepare the data  
  33.              var source =  
  34.             {  
  35.                 datatype: "xml",  
  36.                 datafields: [  
  37.                      { name: 'SupplierName', type: 'string' },  
  38.                      { name: 'Quantity', type: 'number' },  
  39.                      { name: 'OrderDate', type: 'date' },  
  40.                      { name: 'OrderAddress', type: 'string' },  
  41.                      { name: 'Freight', type: 'number' },  
  42.                      { name: 'Price', type: 'number' },  
  43.                      { name: 'City', type: 'string' },  
  44.                      { name: 'ProductName', type: 'string' },  
  45.                      { name: 'Address', type: 'string' }  
  46.                 ],  
  47.                 url: 'orderdetailsextended.xml',  
  48.                 root: 'DATA',  
  49.                 record: 'ROW'  
  50.             };  
  51.              var dataAdapter = new $.jqx.dataAdapter(source, {  
  52.                  loadComplete: function () {  
  53.                  }  
  54.              });  
  55.              // create jqxgrid.  
  56.              $("#jqxgrid").jqxGrid(  
  57.             {  
  58.                 width: 900,  
  59.                 source: dataAdapter,  
  60.                 filterable: true,  
  61.                 sortable: true,    
  62.                 pageable: true,  
  63.                 autorowheight: true,  
  64.                 altrows: true,  
  65.                 columnsresize: true,                  
  66.                 columns: [  
  67.                   { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },  
  68.                   { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },  
  69.                   { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },  
  70.                   { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },  
  71.                   { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },  
  72.                   { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },  
  73.                   { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },  
  74.                   { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },  
  75.                   { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }  
  76.                 ],  
  77.                 columngroups:  
  78.                 [  
  79.                   { text: 'Product Details', align: 'center', name: 'ProductDetails' },  
  80.                   { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },  
  81.                   { text: 'Location', align: 'center', name: 'Location' }  
  82.                 ]  
  83.             });  
  84.   
  85.             $("#excelExport").jqxButton({ theme: theme });  
  86.             $("#xmlExport").jqxButton({ theme: theme });  
  87.             $("#csvExport").jqxButton({ theme: theme });  
  88.             $("#tsvExport").jqxButton({ theme: theme });  
  89.             $("#htmlExport").jqxButton({ theme: theme });  
  90.             $("#jsonExport").jqxButton({ theme: theme });  
  91.             $("#excelExport").click(function () {  
  92.                 $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');  
  93.             });  
  94.             $("#xmlExport").click(function () {  
  95.                 $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');  
  96.             });  
  97.             $("#csvExport").click(function () {  
  98.                 $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');  
  99.             });  
  100.             $("#tsvExport").click(function () {  
  101.                 $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');  
  102.             });  
  103.             $("#htmlExport").click(function () {  
  104.                 $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');  
  105.             });  
  106.             $("#jsonExport").click(function () {  
  107.                 $("#jqxgrid").jqxGrid('exportdata', 'json', 'jqxGrid');  
  108.             });  
  109.             $("#print").jqxButton();  
  110.   
  111.             $("#print").click(function () {  
  112.                 var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');  
  113.                 var newWindow = window.open('', '', 'width=800, height=500'),  
  114.                 document = newWindow.document.open(),  
  115.                 pageContent =  
  116.                     '<!DOCTYPE html>\n' +  
  117.                     '<html>\n' +  
  118.                     '<head>\n' +  
  119.                     '<meta charset="utf-8" />\n' +  
  120.                     '<title>jQWidgets Grid</title>\n' +  
  121.                     '</head>\n' +  
  122.                     '<body>\n' + gridContent + '\n</body>\n</html>';  
  123.                 document.write(pageContent);  
  124.                 document.close();  
  125.                 newWindow.print();  
  126.             });  
  127.          });  
  128.     </script>  
  129. </head>  
  130. <body class='default'>  
  131.     <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">  
  132.         <div id="jqxgrid"></div>  
  133.         <div style='margin-top: 20px;'>  
  134.             <div style='float: left;'>  
  135.                 <input type="button" value="Export to Excel" id='excelExport' />  
  136.                 <br /><br />  
  137.                 <input type="button" value="Export to XML" id='xmlExport' />  
  138.             </div>  
  139.             <div style='margin-left: 10px; float: left;'>  
  140.                 <input type="button" value="Export to CSV" id='csvExport' />  
  141.                 <br /><br />  
  142.                 <input type="button" value="Export to TSV" id='tsvExport' />  
  143.             </div>  
  144.             <div style='margin-left: 10px; float: left;'>  
  145.                 <input type="button" value="Export to HTML" id='htmlExport' />  
  146.                 <br /><br />  
  147.                 <input type="button" value="Export to JSON" id='jsonExport' />  
  148.             </div>  
  149.             <div style='margin-left: 10px; float: left;'>  
  150.                 <input type="button" value="Print" id='print' />  
  151.             </div>  
  152.         </div>  
  153.     </div>  
  154. </body>  
  155. </html>  
That is all. We have successfully created a wonderful JQX Grid as in the following:

JOX Grid

JOX Grid table 2

JOX Grid table 3

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?
  1. rendertoolbar:function (toolbar) {  
  2.                                      var me = this;  
  3.                                      var container = $("<div ></div>");  
  4.                                      var input = $('<div id="excelExport" style="background-color: #555555;float: left; font-
  5.                                                     weight: bold;line-height: 28px; min-
  6.                                                     width: 80px;padding: 3px 5px 3px 10px;color: #fff; ">Excel</div> 
  7.                                                     div style="background-color: #555555;float: left; font-weight: bold;line-
  8.                                                     height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-
  9.                                                     left: 3px;" id="print" >Print</div></div>');  
  10.                                      toolbar.append(container);  
  11.                                      container.append(input);  
  12.                                  }  
Add the preceding function also. :) Now this is how your JQX Grid Implementation must be:
  1. $("#jqxgrid").jqxGrid(  
  2.                         {  
  3.                             width: 900,  
  4.                             source: dataAdapter,  
  5.                             filterable: true,  
  6.                             sortable: true,    
  7.                             pageable: true,  
  8.                             autorowheight: true,  
  9.                             altrows: true,  
  10.                             columnsresize: true,  
  11.                             showtoolbar: true,  
  12.                             rendertoolbar: function (toolbar) {  
  13.                             var me = this;  
  14.                             var container = $("<div ></div>");  
  15.                             var input = $('<div id="div1" style="background-color: #555555;float: left; font-weight: bold;line-
  16.                                           height: 28px; min-width: 80px;padding: 3px 5px 3px 10px;color: #fff; ">Your First Div</div>
  17.                                           <div style="background-color: #555555;float: left; font-weight: bold;line-height: 28px; min-
  18.                                           width: 80px;padding: 3px 5px 3px 10px;color: #fff; margin-
  19.                                           left: 3px;" id="Div2" >Your Second Div</div></div>');  
  20.                            toolbar.append(container);  
  21.                            container.append(input);  
  22.                       },  
  23.                 columns: [  
  24.                            { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },  
  25.                            { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName'
  26.                              , width: 120 },  
  27.                            { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'cente
  28.                              r', align: 'center', width: 80 },  
  29.                            { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', 
  30.                              align: 'center', width: 100 },  
  31.                            { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', da
  32.                              tafield: 'OrderDate', width: 100 },  
  33.                            { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'Order
  34.                              Address', width: 100 },  
  35.                            { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsa
  36.                              lign: 'center', width: 70 },  
  37.                            { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width
  38.                              : 120 },  
  39.                            { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }  
  40.                          ],  
  41.            columngroups: [  
  42.                            { text: 'Product Details', align: 'center', name: 'ProductDetails' },  
  43.                            { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },  
  44.                            { text: 'Location', align: 'center', name: 'Location' }  
  45.                          ]  
  46.          });  
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. 
  1. jquery.sharer.css
  2. jquery.sharer.js
  3. sharer.png
  1. <link href="styles/jquery.sharer.css" rel="stylesheet" type="text/css" />  
  2. <script src="scripts/jquery.sharer.js" type="text/javascript"></script>  
Include the script to your page.
  1. $(".social-buttons").sharer();  
Add a div where you can see the share buttons.
  1. <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

  1. enabletooltips: true, 

To apply themes add the following line to your grid settings

  1. theme: 'metro', 

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

  1. <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

  1. autoheight: true, 

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

  1. 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

 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs