JavaScript

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

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