JQuery

Load Data To Grid On Scroll

As you all know Grid is a main control in every dashboard. Every company uses a grid control for showing reports or any kind of data. Hence it is widely used and it is important that the grid must be loaded faster. So the performance of the grid control matters a lot. Isn’t it? Here in this post we are going to do a task which will increase the performance of the grid since we are going to load the data as per user request (on scrolling down). Sounds cool?. Normally what we do is, we will load all the data to the grid in a head shot, the problem in this manner is, it will take ages to load the full data to grid. Hence the user will close your application and the won’t return back. That is sad thing right? So we will concentrate on the performance part now. I hope you will like this.

Background

I am working in a dashboard application. So for me performance was the main criteria to take care. We have used server side paging to improve the performance. This I will share in my next article. Now we will try to load a client side data on demand. Let us say whenever user scroll down. Sounds fine? Ok, let us start then.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here.

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the following code.

Create an HTML page

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Load Data To Grid On Scroll - Sibeesh Passion</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h3>Load Data To Grid On Scroll - Sibeesh Passion</h3>  
  10.     <br />  
  11.     <div id="jqxgrid"></div>  
  12. </body>  
  13.   
  14. </html>  
Add the needed references:
  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/jqxmenu.js"></script>  
  9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  16. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  17. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  18. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  19. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
Here comes the main part.

Grid Settings or Grid Initialization
  1. <script type="text/javascript">  
  2. $(document).ready(function()  
  3. {  
  4.     // prepare the data  
  5.     var data = new Array();  
  6.     var firstNames = ["Sibeesh", "Ajay", "Ansary", "Aghil", "Shanto", "Libin", "Vignesh", "Ramesh", "Sathian", "Elango", "karthik"];  
  7.     var lastNames = ["Venu", "Bhasy", "Rasheed", "Ghosh", "Thomas", "Lawrence", "Vicky", "K", "K", "S", "Srinivasan"];  
  8.     var productNames = ["Shoe", "Sandals", "Shampoo", "Soap", "Hair Lotion", "Creams", "Bags", "Watch", "Books", "Mobile", "Tab", "Laptop"];  
  9.     var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "20.75", "13.25", "124.0"];  
  10.     // generate sample data.  
  11.     var generatedata = function(startindex, endindex)  
  12.     {  
  13.         var data = {};  
  14.         for (var i = startindex; i < endindex; i++)  
  15.         {  
  16.             var row = {};  
  17.             var productindex = Math.floor(Math.random() * productNames.length);  
  18.             var price = parseFloat(priceValues[productindex]);  
  19.             var quantity = 1 + Math.round(Math.random() * 10);  
  20.             row["id"] = i;  
  21.             row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];  
  22.             row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];  
  23.             row["productname"] = productNames[productindex];  
  24.             row["price"] = price;  
  25.             row["quantity"] = quantity;  
  26.             row["total"] = price * quantity;  
  27.             data[i] = row;  
  28.         }  
  29.         return data;  
  30.     }  
  31.     var source = {  
  32.         datatype: "array",  
  33.         localdata:  
  34.         {},  
  35.         totalrecords: 1000000  
  36.     };  
  37.     // load virtual data.  
  38.     var rendergridrows = function(params)  
  39.     {  
  40.         var data = generatedata(params.startindex, params.endindex);  
  41.         return data;  
  42.     }  
  43.     var dataAdapter = new $.jqx.dataAdapter(source);  
  44.     $("#jqxgrid").jqxGrid(  
  45.     {  
  46.         width: 850,  
  47.         source: dataAdapter,  
  48.         virtualmode: true,  
  49.         rendergridrows: rendergridrows,  
  50.         columns: [  
  51.         {  
  52.             text: 'Id',  
  53.             datafield: 'id',  
  54.             width: 100  
  55.         },  
  56.         {  
  57.             text: 'First Name',  
  58.             datafield: 'firstname',  
  59.             width: 120  
  60.         },  
  61.         {  
  62.             text: 'Last Name',  
  63.             datafield: 'lastname',  
  64.             width: 120  
  65.         },  
  66.         {  
  67.             text: 'Product',  
  68.             datafield: 'productname',  
  69.             width: 180  
  70.         },  
  71.         {  
  72.             text: 'Quantity',  
  73.             datafield: 'quantity',  
  74.             width: 80,  
  75.             cellsalign: 'right'  
  76.         },  
  77.         {  
  78.             text: 'Unit Price',  
  79.             datafield: 'price',  
  80.             width: 90,  
  81.             cellsalign: 'right',  
  82.             cellsformat: 'c2'  
  83.         },  
  84.         {  
  85.             text: 'Total',  
  86.             datafield: 'total',  
  87.             cellsalign: 'right',  
  88.             cellsformat: 'c2'  
  89.         }]  
  90.     });  
  91. });  
  92. </script>  
As you can find out in the above code we are generating the data dynamically using a function declaration generatedata.

Have you noticed that in the grid settings we have given virtualmode: true. This is very important. This property is meant to be used for handling the dynamic data in grid.

And another property you must be aware of is rendergridrows: rendergridrows. This means, we are rendering the grid data on demand. Like when user change the pager or scroll. So we are going to call our generateddata function in the rendergridrows. We are passing the start index and end index to the function, so that the dynamic data won’t be repeated.
  1. var rendergridrows = function(params)  
  2. {  
  3.     var data = generatedata(params.startindex, params.endindex);  
  4.     return data;  
  5. }  
Once the data is ready, we will pass it to the source object and source object to dataAdapter and finally dataAdapter to grid.

Shall we check our output now?

Output

Load Data On Scroll

Load Data On Scroll
Complete Code
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Load Data To Grid On Scroll - Sibeesh Passion</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/jqxmenu.js"></script>  
  14.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  15.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  16.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  17.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  18.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  19.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  20.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  21.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  22.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  23.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  24.     <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
  25.     <script type="text/javascript">  
  26.     $(document).ready(function()  
  27.     {  
  28.         // prepare the data  
  29.         var data = new Array();  
  30.         var firstNames = ["Sibeesh", "Ajay", "Ansary", "Aghil", "Shanto", "Libin", "Vignesh", "Ramesh", "Sathian", "Elango", "karthik"];  
  31.         var lastNames = ["Venu", "Bhasy", "Rasheed", "Ghosh", "Thomas", "Lawrence", "Vicky", "K", "K", "S", "Srinivasan"];  
  32.         var productNames = ["Shoe", "Sandals", "Shampoo", "Soap", "Hair Lotion", "Creams", "Bags", "Watch", "Books", "Mobile", "Tab", "Laptop"];  
  33.         var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "20.75", "13.25", "124.0"];  
  34.         var generatedata = function(startindex, endindex)  
  35.         {  
  36.             var data = {};  
  37.             for (var i = startindex; i < endindex; i++)  
  38.             {  
  39.                 var row = {};  
  40.                 var productindex = Math.floor(Math.random() * productNames.length);  
  41.                 var price = parseFloat(priceValues[productindex]);  
  42.                 var quantity = 1 + Math.round(Math.random() * 10);  
  43.                 row["id"] = i;  
  44.                 row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];  
  45.                 row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];  
  46.                 row["productname"] = productNames[productindex];  
  47.                 row["price"] = price;  
  48.                 row["quantity"] = quantity;  
  49.                 row["total"] = price * quantity;  
  50.                 data[i] = row;  
  51.             }  
  52.             return data;  
  53.         }  
  54.         var source = {  
  55.             datatype: "array",  
  56.             localdata:  
  57.             {},  
  58.             totalrecords: 1000000  
  59.         };  
  60.         // load virtual data.  
  61.         var rendergridrows = function(params)  
  62.         {  
  63.             var data = generatedata(params.startindex, params.endindex);  
  64.             return data;  
  65.         }  
  66.         var dataAdapter = new $.jqx.dataAdapter(source);  
  67.         $("#jqxgrid").jqxGrid(  
  68.         {  
  69.             width: 850,  
  70.             source: dataAdapter,  
  71.             virtualmode: true,  
  72.             rendergridrows: rendergridrows,  
  73.             columns: [  
  74.             {  
  75.                 text: 'Id',  
  76.                 datafield: 'id',  
  77.                 width: 100  
  78.             },  
  79.             {  
  80.                 text: 'First Name',  
  81.                 datafield: 'firstname',  
  82.                 width: 120  
  83.             },  
  84.             {  
  85.                 text: 'Last Name',  
  86.                 datafield: 'lastname',  
  87.                 width: 120  
  88.             },  
  89.             {  
  90.                 text: 'Product',  
  91.                 datafield: 'productname',  
  92.                 width: 180  
  93.             },  
  94.             {  
  95.                 text: 'Quantity',  
  96.                 datafield: 'quantity',  
  97.                 width: 80,  
  98.                 cellsalign: 'right'  
  99.             },  
  100.             {  
  101.                 text: 'Unit Price',  
  102.                 datafield: 'price',  
  103.                 width: 90,  
  104.                 cellsalign: 'right',  
  105.                 cellsformat: 'c2'  
  106.             },  
  107.             {  
  108.                 text: 'Total',  
  109.                 datafield: 'total',  
  110.                 cellsalign: 'right',  
  111.                 cellsformat: 'c2'  
  112.             }]  
  113.         });  
  114.     });  
  115.     </script>  
  116. </head>  
  117.   
  118. <body>  
  119.     <h3>Load Data To Grid On Scroll - Sibeesh Passion</h3>  
  120.     <br />  
  121.     <div id="jqxgrid"></div>  
  122. </body>  
  123.   
  124. </html>  
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?

If you have any questions, then please mention it in the comments section.
 
Read this article in my blog here. 

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