Post
Ask Question

Assigning Data Source Batch By Batch in JQWidgets JQX Grid

Introduction

If you are new to the term JQX Grid then please read here: JQX Grid With Filtering And Sorting. For the past days I have been working on JQX Grid. Now I will share a tip with you that you may find useful when you work with a large amount of data. It might be useful when you work with the Dashboards also. Download the necessary files here.
Please see the original article link here : http://sibeeshpassion.com/Load-JQWidget-JQXGrid-Batch-By-Batch.html

Background

When you work with a large data set or large data source, you may find many performance issues. You may need to spend hours improving the performance, that is also for saving a few seconds. The problem that I encountered is different, since my data source is ADOMD cell set, I wanted to convert the cell set to HTML table and from there to JSON and JSON Array. I could do that part successfully. I had a grid that has around 20k records (I know it is a less amount of data). But still it was taking 1 minute to load fully in my client's production environment . Yeah, that was too low. So I decided to go with the server-side paging as I could find a demo in JQWidgets blogs. But the real problem is , the Query formation is really tough in ADOMD since my measures and dimensions are not static, everything is dynamic in my dashboard application. So I encountered many problems. Later I found server-side paging is not possible in my application, hence I decided to load the data as a batch. Let's say we will load the first thousand the first time. So the grid will load in a blink. And of course, my client will fall happily :) And in the background, I will be creating an array by 1000 by 1000 . Once it reaches the maximum length (in other words all the record that we need to bind to the grid), I will assign the data source to the grid. Since this entire process is handled in the background, no one knows about this, except you and me ;) . So let's move into the code.

Using the Code

I hope you have downloaded the necessry files, if not then please download it.

What we need
    Simple HTML
    1. <!DOCTYPE html>   
    2.    <html lang="en">  
    3.       <head>  
    4.          <title id='Description'>Load JQX Data batch by Batch - Sibeesh|Passion  
    5.          </title>  
    6.       </head>  
    7.       <body class='default'>  
    8.          <div id="jqxgrid"></div>  
    9.       </body>  
    10.    </html>  
    Include Links
    1. <script src="jquery-1.9.1.js"></script>  
    2. <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
    3. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
    4. <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
    5. <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
    6. <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
    7. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
    8. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
    9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
    10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
    11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
    12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
    13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
    14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
    15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
    16. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
    17. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
    18. <script src="JQXItems/jqwidgets/jqxmenu.js"></script>  
    19. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
So now we will formulate a JQX grid in the div that has id as jqxgrid. To begin, we need some data to bind to the grid right. As of now we will create an Array of elements in the client side itself. Of Course we will be using jQuery for the array formulation. You can get the data from your database or from a local file if you want. You may need to use some ajax call in jQuery for that.

Create Dummy Array

In the downloaded files, you can find a JavaScript file generatedata.js. That is where we will create some local arrays. Please find the file and include the reference to your page. So that we can directly use that function.

Data Processing

I hope we have created the local array, now what else do we need? Yeah, you are right, we need to build the JQX Grid. To formulate it we need to start with the jQuery document ready function.
  1. <script type="text/javascript">  
  2.    $(document).ready(function () {  
  3.       var totRecord = 30000; // If you create data from the DB, you need to get the total count from there.  
  4.       var dataEntire = [];  
  5.       var remainingData = [];  
  6.       var pagenumber;  
  7.       loadGridWithInitialData();  
  8.    });  
  9. </script>  
Now the function loadGridWithInitialData() will load the grid initial data. So let us move on and check how the function works.
  1. function loadGridWithInitialData() {  
  2.    //This is where we are creating the data, as of now I am creating 1000 records initially.  
  3.    dataEntire = generatedata(1000);  
  4.    var source = {  
  5.       localdata: dataEntire,  
  6.       contentType: 'application/json; charset=utf-8',  
  7.       datatype: "array",  
  8.       datafields: [  
  9.       { name: 'firstname', type: 'string' },  
  10.       { name: 'lastname', type: 'string' },  
  11.       { name: 'productname', type: 'string' },  
  12.       { name: 'date', type: 'date' },  
  13.       { name: 'quantity', type: 'number' }  
  14.    ]  
  15.    };  
  16.    taskOverviewDataadapter = new $.jqx.dataAdapter(source);  
  17.    $("#jqxgrid").jqxGrid(  
  18.    {  
  19.       selectionmode: 'none',  
  20.       width: '100%',  
  21.       source: taskOverviewDataadapter,  
  22.       autoheight: true,  
  23.       pageable: true,  
  24.       altrows: true,  
  25.       columns: [  
  26.          { text: 'First Name', datafield: 'firstname', width: 200, 'pinned': true },  
  27.          { text: 'Last Name', datafield: 'lastname', width: 200 },  
  28.          { text: 'Product', datafield: 'productname', width: 180 },  
  29.          { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },  
  30.          { text: 'Quantity', datafield: 'quantity', cellsalign: 'right', cellsformat: 'c' }  
  31.       ]  
  32.    });  
  33. }  
Wow! We have created a JQX Grid successfully :) Cheers!!!.

Adding data to the local array in background

As the header implies, we will create the local array in which we are appending the data in the background. The reason I say background is that we won't let the user know we are creating an array, even after the grid loads. Shoooooo! Don't tell anyone. :) So once the grid loads, after four seconds we can start our work. Here I am using the setTimeout function.
  1. setTimeout(function () {  
  2.    remainingData = loadRemainingDataToLocalArray(dataEntire);  
  3.    }, 10000);  
  4.    So here we calling a function loadRemainingDataToLocalArray and assiging the returned array in to the local array.  
  5.    function loadRemainingDataToLocalArray(dataEntire) {  
  6.       for (var i = 0; i < totRecord;) {  
  7.          var dataCurrent = generatedata(1000);//exicute till the array count reaches our total record count which we declared at the top.  
  8.          $.merge(dataEntire, dataCurrent);  
  9.          i = dataEntire.length;//Setting the index here  
  10.       }  
  11.       return dataEntire;  
  12.    }  
In this function we are using a for loop function, that will execute until the array count reaches our total record count that we have declared at the top. Cool. We created the array. :)

Assigning the newly created array to the JQX data source

There is no need to assign the formulated array to the grid. For that we can alter our setTimeoutfunction as follows:
  1. setTimeout(function () {  
  2.       remainingData = loadRemainingDataToLocalArray(dataEntire);  
  3.       if (remainingData.length == totRecord)  
  4.       loadRemainingDataToSource(remainingData);  
  5. }, 10000);  
Please note that we have called a new function loadRemainingDataToSource. In that function we are passing our new array and let us see that function now.
  1. function loadRemainingDataToSource(remainingData) {  
  2.    var source = {  
  3.       localdata: remainingData,  
  4.       contentType: 'application/json; charset=utf-8',  
  5.       datatype: "array",  
  6.       datafields: [  
  7.          { name: 'firstname', type: 'string' },  
  8.          { name: 'lastname', type: 'string' },  
  9.          { name: 'productname', type: 'string' },  
  10.          { name: 'date', type: 'date' },  
  11.          { name: 'quantity', type: 'number' }  
  12.       ]  
  13.    };  
  14. taskOverviewDataadapter = new $.jqx.dataAdapter(source);  
  15. $("#jqxgrid").jqxGrid(  
  16. {  
  17. selectionmode: 'none',  
  18. width: '100%',  
  19. source: taskOverviewDataadapter,  
  20. autoheight: true,  
  21. filterable: true,  
  22. sortable: true,  
  23. pageable: true,  
  24. autorowheight: true,  
  25. altrows: true,  
  26. columnsresize: true,  
  27. columnsreorder: true,  
  28. columns: [  
  29. { text: 'First Name', datafield: 'firstname', width: 200, 'pinned': true },  
  30. { text: 'Last Name', datafield: 'lastname', width: 200 },  
  31. { text: 'Product', datafield: 'productname', width: 180 },  
  32. { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },  
  33. { text: 'Quantity', datafield: 'quantity', cellsalign: 'right', cellsformat: 'c' }  
  34. ]  
  35. });  
  36. $("#jqxgrid").jqxGrid('updatebounddata');  
  37. }  
Ha ha! We have bound the new array to the grid. But are you sure the user didn't notice we bound the grid again? What if the user was in page 2? What will happen when we re assign the grid? Yeah it will again go to page 1. If it is that way, our user will know something happened. And of course if you did this for any client, he/she will create a bug and assign it to you. :( No need to be sad. I have an idea for that. Cheers.

Tracking the paging information

When we call the function loadRemainingDataToLocalArray we can get the page information as follows.
  1. var paginginformation = $("#jqxgrid").jqxGrid("getpaginginformation");  
  2. pagenumber = paginginformation.pagenum;  
  3. and after we re asiign the source , we need to set the page number as follows.  
  4. $("#jqxgrid").jqxGrid('gotopage', pagenumber);  
That's all :)

Complete Code

Now this is how our complete code looks like.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <title id='Description'>Load JQX Data batch by Batch - Sibeesh|Passion  
  5.       </title>  
  6.       <script src="jquery-1.9.1.js"></script>  
  7.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
  8.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
  9.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
  10.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
  11.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
  12.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
  13.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  14.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  15.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  16.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  17.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  18.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  19.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  20.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  21.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  22.       <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  23.       <script src="JQXItems/jqwidgets/jqxmenu.js"></script>  
  24.       <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
  25.       <script src="generatedata.js"></script>  
  26.       <script type="text/javascript">  
  27.       $(document).ready(function () {  
  28.          var totRecord = 30000;  
  29.          var dataEntire = [];  
  30.          var remainingData = [];  
  31.          var pagenumber;  
  32.          loadGridWithInitialData();  
  33.          setTimeout(function () {  
  34.             remainingData = loadRemainingDataToLocalArray(dataEntire);  
  35.             if (remainingData.length == totRecord)  
  36.             loadRemainingDataToSource(remainingData);  
  37.             $("#jqxgrid").jqxGrid('gotopage', pagenumber);  
  38.          }, 10000);  
  39.          function loadGridWithInitialData() {  
  40.             dataEntire = generatedata(1000);  
  41.             var source = {  
  42.                localdata: dataEntire,  
  43.                contentType: 'application/json; charset=utf-8',  
  44.                datatype: "array",  
  45.                datafields: [  
  46.                   { name: 'firstname', type: 'string' },  
  47.                   { name: 'lastname', type: 'string' },  
  48.                   { name: 'productname', type: 'string' },  
  49.                   { name: 'date', type: 'date' },  
  50.                   { name: 'quantity', type: 'number' }  
  51.                ]  
  52.             };  
  53.             taskOverviewDataadapter = new $.jqx.dataAdapter(source);  
  54.             $("#jqxgrid").jqxGrid(  
  55.             {  
  56.                selectionmode: 'none',  
  57.                width: '100%',  
  58.                source: taskOverviewDataadapter,  
  59.                autoheight: true,  
  60.                pageable: true,  
  61.                altrows: true,  
  62.                columns: [  
  63.                   { text: 'First Name', datafield: 'firstname', width: 200, 'pinned': true },  
  64.                   { text: 'Last Name', datafield: 'lastname', width: 200 },  
  65.                   { text: 'Product', datafield: 'productname', width: 180 },  
  66.                   { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },  
  67.                   { text: 'Quantity', datafield: 'quantity', cellsalign: 'right', cellsformat: 'c' }  
  68.                ]  
  69.             });  
  70.          }  
  71.          function loadRemainingDataToLocalArray(dataEntire) {  
  72.             var paginginformation = $("#jqxgrid").jqxGrid("getpaginginformation");  
  73.             pagenumber = paginginformation.pagenum;  
  74.             for (var i = 0; i < totRecord;) {  
  75.                var dataCurrent = generatedata(1000);  
  76.                $.merge(dataEntire, dataCurrent);  
  77.                i = dataEntire.length;  
  78.             }  
  79.             return dataEntire;  
  80.          }  
  81.          function loadRemainingDataToSource(remainingData) {  
  82.             var source = {  
  83.                localdata: remainingData,  
  84.                contentType: 'application/json; charset=utf-8',  
  85.                datatype: "array",  
  86.                datafields: [  
  87.                   { name: 'firstname', type: 'string' },  
  88.                   { name: 'lastname', type: 'string' },  
  89.                   { name: 'productname', type: 'string' },  
  90.                   { name: 'date', type: 'date' },  
  91.                   { name: 'quantity', type: 'number' }  
  92.                ]  
  93.             };  
  94.             taskOverviewDataadapter = new $.jqx.dataAdapter(source);  
  95.             $("#jqxgrid").jqxGrid(  
  96.             {  
  97.                selectionmode: 'none',  
  98.                width: '100%',  
  99.                source: taskOverviewDataadapter,  
  100.                autoheight: true,  
  101.                filterable: true,  
  102.                sortable: true,  
  103.                pageable: true,  
  104.                autorowheight: true,  
  105.                altrows: true,  
  106.                columnsresize: true,  
  107.                columnsreorder: true,  
  108.                columns: [  
  109.                   { text: 'First Name', datafield: 'firstname', width: 200, 'pinned': true },  
  110.                   { text: 'Last Name', datafield: 'lastname', width: 200 },  
  111.                   { text: 'Product', datafield: 'productname', width: 180 },  
  112.                   { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },  
  113.                   { text: 'Quantity', datafield: 'quantity', cellsalign: 'right', cellsformat: 'c' }  
  114.                ]  
  115.             });  
  116.             $("#jqxgrid").jqxGrid('updatebounddata');  
  117.          }  
  118.       });  
  119.    </script>  
  120. </head>  
  121. <body class='default'>  
  122. <div id="jqxgrid"></div>  
  123. </body>  
  124. </html>  
Output



Happy Coding :) Please like and share, if you liked this article. Please provide your valuable comments.


Similar Articles