Post
Ask Question

Implementing Nested Grid in JQWidget JQX Grid

Introduction

 
If you are new to JQwdget JQX Grid, I recommend you read my previous articles on the topic here.
Today we will learn how to implement a nested grid using JQWidget JQX grid files.
 
Background
 
In my previous article, I said all of the properties of the JQwidget JQX grid and now we can implement them. Now I have a requirement to implement the Nested grid. So I thought of sharing that with you all.
 

Loading required files

 
To start, we need to load the necessary files first. Just select the files from the Solution Explorer and drag those to the last of body section of the page.
  1. <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>    
  2. <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>    
  3. <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>    
  4. <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>    
  5. <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>    
  6. <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>    
  7. <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>    
  8. <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>    
  9. <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>     
Now it is time to load the CSS style sheet for the grid.
  1. <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />   
Once you have loaded the required files, we can start our implementation. 
 
Before loading the JQWidget JQX grid, we need to understand the preceding terms.
  1. A Data Array: The main and the first necessary thing to load a grid is the data, we will provide a JSON array as data.
     
  2. A Source: Once the data is ready we will give this array to the source, where the source is a JSON property on which we are giving some initial settings. We will look to it when implementing the grid.
     
  3. A Data Adapter: And once we have created the source element we will give this to another JSON property that is the same as the source with some different settings.
     
    Now we will start the grid implementation.

Implementing Grid

 
First, we will load a simple grid, then we will implement the nested gird. Sounds good?
 
The simplest implementation to load a JQWidget JQX grid is as follows.
  1. $("#jqxgrid").jqxGrid(    
  2. {    
  3.     width: 850,    
  4.     height: 365,    
  5.     sortable: true,    
  6.     source: source,    
  7.     //rowdetails: true,      
  8.     rowsheight: 35,    
  9.     //initrowdetails: initrowdetails,      
  10.     rowdetailstemplate: {    
  11.         rowdetails: "<div id='grid' style='margin: 10px;'></div>",    
  12.         rowdetailsheight: 220,    
  13.         rowdetailshidden: true    
  14.     },    
  15.     ready: function() {    
  16.         $("#jqxgrid").jqxGrid('showrowdetails', 1);    
  17.     },    
  18.     columns: [{    
  19.         text: 'User Id',    
  20.         datafield: 'UserId',    
  21.         hidden: true    
  22.     }, {    
  23.         text: 'My Transactions',    
  24.         datafield: 'TransactionName'    
  25.     }]    
  26. });   
In the preceding code I knowingly commented two properties. Have you noticed it?
  1. //rowdetails: true,    
  2. //initrowdetails: initrowdetails,   
The preceding specified properties are the properties we need to assign for the nested grid.
 
We can set the data and assign it to the source as follows for the simple grid.
  1. var tdData = $.parseJSON('[{"UserId": "5","TransactionName": "TRAN-Chennai"},{"UserId": "6","TransactionName": "TRAN-Kerala"}]');    
  2. var source =    
  3. {    
  4.     datafields: [{    
  5.         name: 'UserId',    
  6.         type: 'int'    
  7.     }, {    
  8.         name: 'TransactionName',    
  9.         type: 'string'    
  10.     }],    
  11.     id: 'UserId',    
  12.     datatype: "array",    
  13.     async: false,    
  14.     localdata: tdData    
  15. };    
  16. var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, {    
  17.     autoBind: true    
  18. });    
  19. orders = ordersDataAdapter.records;   
Now if you run the page you will get output as follows.
 
 
If your grid is not populated, please go to your browser console and check whether the required files are loaded correctly.
 
Now it is time to implement the nested grid.
 

Implementing the Nested Grid

 
So our new settings for the parent grid must be as follows.
  1. $("#jqxgrid").jqxGrid(    
  2. {    
  3.     width: 850,    
  4.     height: 365,    
  5.     sortable: true,    
  6.     source: source,    
  7.     rowdetails: true,    
  8.     rowsheight: 35,    
  9.     initrowdetails: initrowdetails,    
  10.     rowdetailstemplate: {    
  11.         rowdetails: "<div id='grid' style='margin: 10px;'></div>",    
  12.         rowdetailsheight: 220,    
  13.         rowdetailshidden: true    
  14.     },    
  15.     ready: function() {    
  16.         $("#jqxgrid").jqxGrid('showrowdetails', 1);    
  17.     },    
  18.     columns: [{    
  19.         text: 'User Id',    
  20.         datafield: 'UserId',    
  21.         hidden: true    
  22.     }, {    
  23.         text: 'My Transactions',    
  24.         datafield: 'TransactionName'    
  25.     }]    
  26. });   
And now we will create the function initrowdetails, you can see the code here.
  1. var nestedGrids = new Array();    
  2. // create nested grid.      
  3. var initrowdetails = function(index, parentElement, gridElement, record)     
  4. {    
  5.     var id = record.uid.toString();    
  6.     var grid = $($(parentElement).children()[0]);    
  7.     nestedGrids[index] = grid;    
  8.     var filtergroup = new $.jqx.filter();    
  9.     var filter_or_operator = 1;    
  10.     var filtervalue = id;    
  11.     var filtercondition = 'equal';    
  12.     var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);    
  13.     // fill the orders depending on the id.      
  14.     var ordersbyid = [];    
  15.     for (var m = 0; m < orders.length; m++) {    
  16.         var result = filter.evaluate(orders[m]["UserId"]);    
  17.         if (result)    
  18.         ordersbyid.push(orders[m]);    
  19.     }    
  20.     var secondaryDataFields = $.parseJSON('[{ "name": "UserId", "type": "int" },{ "name": "TransactionName", "type": "string" },{ "name": "tranDate", "type": "string" },{ "name": "tranUser", "type": "string" }]');    
  21.     var orderssource = {    
  22.         datafields: secondaryDataFields,    
  23.         id: 'UserId',    
  24.         localdata: ordersbyid    
  25.     }    
  26.     var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);    
  27.     var secondaryGridColumn = $.parseJSON('[{ "text": "User Id", "datafield":"UserId" , "hidden":"true"},{ "text": "Transaction Name", "datafield":"TransactionName" },{ "text": "Transaction Date", "datafield":"tranDate" },{ "text": "User", "datafield":"tranUser" }]');    
  28.     if (grid != null) {    
  29.         grid.jqxGrid({    
  30.             source: nestedGridAdapter,    
  31.             width: 780,    
  32.             height: 200,    
  33.             columns: secondaryGridColumn    
  34.         });    
  35.     }    
  36. }   
You can see that the settings provided are the same as we provided for the parent grid and please note that the "id" in both of the sources are the same. We provide "UserId" as the key.
 
Complete Code
 
The following is the complete code.
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta name="viewport" content="width=device-width" />    
  5.         <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />    
  6.         <script type="text/javascript" src="jqwidgets/jquery-1.9.1.js"></script>    
  7.         <script type="text/javascript">      
  8.     
  9.     $(document).ready(function() {    
  10.     var tdData = $.parseJSON('[{"UserId": "5","TransactionName": "TRAN-Chennai"},{"UserId": "6","TransactionName": "TRAN-Kerala"}]');    
  11.     var source =    
  12.     {    
  13.         datafields: [{    
  14.             name: 'UserId',    
  15.             type: 'int'    
  16.         }, {    
  17.             name: 'TransactionName',    
  18.             type: 'string'    
  19.         }],    
  20.     
  21.         id: 'UserId',    
  22.     
  23.         datatype: "array",    
  24.     
  25.         async: false,    
  26.     
  27.         localdata: tdData    
  28.     };    
  29.     var orderdetailsurl = $.parseJSON('[{"UserId": "5","TransactionName": "Adyar","tranDate": "04/22/2015 1:35:52","tranUser": "skannan"},{"UserId": "5","TransactionName": "Guindy","tranDate": "04/22/2015 1:35:52","tranUser": "skannan"},{"UserId": "6","TransactionName": "Trichur","tranDate": "04/21/2015 1:46:50","tranUser": "bmahadevan"}]');    
  30.     var secondGridData = $.parseJSON('[{ "name": "UserId", "type": "int" },{ "name": "TransactionName", "type": "string" },{ "name": "tranDate", "type": "string" },{ "name": "tranUser", "type": "string" }]');    
  31.     var ordersSource =    
  32.     {    
  33.         datafields: secondGridData,    
  34.         datatype: "array",    
  35.         localdata: orderdetailsurl,    
  36.         async: false    
  37.     };    
  38.     var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, {    
  39.         autoBind: true    
  40.     });    
  41.     orders = ordersDataAdapter.records;    
  42.     var nestedGrids = new Array();    
  43.     // create nested grid.      
  44.     var initrowdetails = function(index, parentElement, gridElement, record) {    
  45.         var id = record.uid.toString();    
  46.         var grid = $($(parentElement).children()[0]);    
  47.         nestedGrids[index] = grid;    
  48.         var filtergroup = new $.jqx.filter();    
  49.         var filter_or_operator = 1;    
  50.         var filtervalue = id;    
  51.         var filtercondition = 'equal';    
  52.         var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);    
  53.         // fill the orders depending on the id.      
  54.         var ordersbyid = [];    
  55.         for (var m = 0; m < orders.length; m++) {    
  56.             var result = filter.evaluate(orders[m]["UserId"]);    
  57.             if (result)    
  58.             ordersbyid.push(orders[m]);    
  59.         }    
  60.         var secondaryDataFields = $.parseJSON('[{ "name": "UserId", "type": "int" },{ "name": "TransactionName", "type": "string" },{ "name": "tranDate", "type": "string" },{ "name": "tranUser", "type": "string" }]');    
  61.         var orderssource = {    
  62.             datafields: secondaryDataFields,    
  63.             id: 'UserId',    
  64.             localdata: ordersbyid    
  65.         }    
  66.         var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);    
  67.         var secondaryGridColumn = $.parseJSON('[{ "text": "User Id", "datafield":"UserId" , "hidden":"true"},{ "text": "Transaction Name", "datafield":"TransactionName" },{ "text": "Transaction Date", "datafield":"tranDate" },{ "text": "User", "datafield":"tranUser" }]');    
  68.         if (grid != null) {    
  69.             grid.jqxGrid({    
  70.                 source: nestedGridAdapter,    
  71.                 width: 780,    
  72.                 height: 200,    
  73.                 columns: secondaryGridColumn    
  74.             });    
  75.         }    
  76.     }    
  77.     // creage jqxgrid      
  78.     $("#jqxgrid").jqxGrid(    
  79.     {    
  80.         width: 850,    
  81.         height: 365,    
  82.         sortable: true,    
  83.         source: source,    
  84.         rowdetails: true,    
  85.         rowsheight: 35,    
  86.         initrowdetails: initrowdetails,    
  87.         rowdetailstemplate: {    
  88.             rowdetails: "    
  89.             <div id='grid' style='margin: 10px;'></div>",    
  90.             rowdetailsheight: 220,    
  91.             rowdetailshidden: true    
  92.         },    
  93.         ready: function() {    
  94.             $("#jqxgrid").jqxGrid('showrowdetails', 1);    
  95.         },    
  96.         columns: [{    
  97.             text: 'User Id',    
  98.             datafield: 'UserId',    
  99.             hidden: true    
  100.         }, {    
  101.             text: 'My Transactions',    
  102.             datafield: 'TransactionName'    
  103.         }]    
  104.     });    
  105. });    
  106.     
  107.     
  108. < /script>      
  109.         <title>JQWidget JQX Nested Grip Implementation @ SibeeshPassion </title>    
  110.     </head>    
  111.     <body class='default'>      
  112.       
  113. JQWidget JQX Nested Grip Implementation @ SibeeshPassion     
  114.         <br />    
  115.         <div id="jqxgrid"></div>    
  116.         <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>    
  117.         <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>    
  118.         <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>    
  119.         <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>    
  120.         <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>    
  121.         <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>    
  122.         <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>    
  123.         <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>    
  124.         <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>    
  125.     </body>    
  126. </html>   
Output
 
Now if things goes well, you will get output as follows.
 
 
 

Conclusion

 
I hope you liked this article. Please provide your valuable suggestions. It matters a lot. Please download the source code to learn more.
 
Point of interest
 
JQX Grid, JQWidget, JQX Nested Grid.


Similar Articles