Site icon Sibeesh Passion

Implementing Nested Grid in JQWidget JQX Grid

SibeeshVenu
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”>
  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.         }],
  21.         id: ‘UserId’,
  23.         datatype: “array”,
  25.         async: false,
  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. });
  108. < /script>
  109.         <title>JQWidget JQX Nested Grip Implementation @ sibeeshpassion </title>
  110.     </head>
  111.     <body class=‘default’>
  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.

Exit mobile version