Sibeesh Passion

Top Menu

  • Home
  • Communities
  • Search
  • About

Main Menu

  • Articles
    • Client Side Technologies
      • JavaScript
      • Angular
      • Node JS
      • JQuery
      • Knockout JS
      • Jasmine Framework
      • Json
      • CSS3
      • HTML5
    • Database
      • SQL
      • MongoDB
      • MySQL
    • Tools
      • IIS
      • Wamp Server
      • WordPress
      • Visual Studio
    • How to
    • Career Advice
    • Interview
    • ASP.NET
    • MVC
    • Azure
    • Web API
    • C#
    • PHP
    • SEO
    • Office Development
  • Product Reviews
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect With Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
  • Achievements
    • Awards And Recognitions
    • Community Achievements
  • Authors
    • Andrew Jackson
    • Ashish Ratan Singh
    • Sibeesh Venu
  • Home
  • Communities
  • Search
  • About

logo

Sibeesh Passion

  • Articles
    • Client Side Technologies
      • JavaScript
      • Angular
      • Node JS
      • JQuery
      • Knockout JS
      • Jasmine Framework
      • Json
      • CSS3
      • HTML5
    • Database
      • SQL
      • MongoDB
      • MySQL
    • Tools
      • IIS
      • Wamp Server
      • WordPress
      • Visual Studio
    • How to
    • Career Advice
    • Interview
    • ASP.NET
    • MVC
    • Azure
    • Web API
    • C#
    • PHP
    • SEO
    • Office Development
  • Product Reviews
    • Office 365 Export PST Tool - Great Results with 100% Accuracy

      March 17, 2018
      0
    • Migrate Files From OneDrive to OneDrive for Business by SysTools

      March 17, 2018
      0
    • Data Recovery

      Recover your lost data in any Windows machine easily

      October 12, 2017
      0
    • Ignite_UI_Chart_Control

      Working With IgniteUI Chart igDataChart Control

      July 14, 2016
      0
    • Apply License Key

      Working With IgniteUI Grid Control

      July 10, 2016
      0
    • Grid with check box selection

      Implement radio button selection in JQWidgets JQXGrid using checkbox

      June 29, 2016
      0
    • High Chart

      Client Side Exporting In HighChart

      May 27, 2016
      0
    • Chart Widgets With Server Side Data In MVC Using Angular JS And Web API Output

      Chart Widgets With Server Side Data In MVC Using Angular JS And ...

      March 17, 2016
      0
    • jQuery Datatable With Server Side Data

      jQuery Datatable With Server Side Data

      February 25, 2016
      0
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect With Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
    • Video: 21 Easy Tips for Healthy Life

      February 22, 2018
      0
    • Azure Face API

      Webinar: Azure Cognitive Service Face API

      July 23, 2017
      0
    • Custom Stylish Handlebar Mirror in Royal Enfield Thunderbird

      June 25, 2017
      0
    • Wrapping Rope in Royal Enfield Crash Guard Or Bumper

      April 22, 2017
      0
    • How to Change Handlebar in Royal Enfield Thunderbird

      April 22, 2017
      0
    • Video: How to be a successful software engineer

      April 22, 2017
      0
    • Webinar: Why Visual Studio 2017? Few Features of VS2017 You May Love

      April 10, 2017
      0
    • Do You Know A Wow Game Is Already Installed In Your Android ...

      April 6, 2017
      0
    • The Cool New Refactoring and Text Editor Options in VS2017

      April 2, 2017
      2
  • Achievements
    • Awards And Recognitions
    • Community Achievements
  • Authors
    • Andrew Jackson
    • Ashish Ratan Singh
    • Sibeesh Venu
  • Validation Using Template Driven Forms in Angular 5

  • Implement Shared Custom Validator Directive in Angular

  • Implementing Guard in Angular 5 App

  • Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io

  • Using MongoDB on Node JS Application Using Mongoose

ArticleJavaScriptJQueryJQWidgetsJQX GridProducts
Home›Article›Load Data To Grid On Sroll

Load Data To Grid On Sroll

By SibeeshVenu
November 2, 2015
2437
0
Share:
Load Data On Scroll

In this post we will discuss about how we can load data to a grid on scroll event. 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, 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 when ever 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: jQWidget JQX Grid

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

Create an HTML page

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Load Data To Grid On Scroll  - Sibeesh Passion</title>
   </head>
<body>
    <h3>Load Data To Grid On Scroll  - Sibeesh Passion</h3>
    <br />
    <div id="jqxgrid"></div>
</body>
</html>

Add the needed references

 <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
    <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

Here comes the main part.

Grid Settings or Grid Initialization

<script type="text/javascript">
         $(document).ready(function () {
             // prepare the data
             var data = new Array();
             var firstNames =
             [
                 "Sibeesh", "Ajay", "Ansary", "Aghil", "Shanto", "Libin", "Vignesh", "Ramesh", "Sathian", "Elango", "karthik"
             ];

             var lastNames =
             [
                 "Venu", "Bhasy", "Rasheed", "Ghosh", "Thomas", "Lawrence", "Vicky", "K", "K", "S", "Srinivasan"
             ];

             var productNames =
             [
                 "Shoe", "Sandals", "Shampoo", "Soap", "Hair Lotion", "Creams", "Bags", "Watch", "Books", "Mobile", "Tab", "Laptop"
             ];

             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"
             ];

             // generate sample data.
             var generatedata = function (startindex, endindex) {
                 var data = {};
                 for (var i = startindex; i < endindex; i++) {
                     var row = {};
                     var productindex = Math.floor(Math.random() * productNames.length);
                     var price = parseFloat(priceValues[productindex]);
                     var quantity = 1 + Math.round(Math.random() * 10);

                     row["id"] = i;
                     row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                     row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                     row["productname"] = productNames[productindex];
                     row["price"] = price;
                     row["quantity"] = quantity;
                     row["total"] = price * quantity;

                     data[i] = row;
                 }
                 return data;
             }

             var source =
             {
                 datatype: "array",
                 localdata: {},
                 totalrecords: 1000000
             };

             // load virtual data.
             var rendergridrows = function (params) {
                 var data = generatedata(params.startindex, params.endindex);
                 return data;
             }
             var dataAdapter = new $.jqx.dataAdapter(source);

             $("#jqxgrid").jqxGrid(
             {
                 width: 850,
                 source: dataAdapter,
                 virtualmode: true,
                 rendergridrows: rendergridrows,
                 columns: [
                     { text: 'Id', datafield: 'id', width: 100 },
                     { text: 'First Name', datafield: 'firstname', width: 120 },
                     { text: 'Last Name', datafield: 'lastname', width: 120 },
                     { text: 'Product', datafield: 'productname', width: 180 },
                     { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                     { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                     { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                 ]
             });
         });
    </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 generatedata 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.

var rendergridrows = function (params) {
                 var data = generatedata(params.startindex, params.endindex);
                 return data;
             }

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

Load Data On Scroll

Load Data On Scroll

Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Load Data To Grid On Scroll  - Sibeesh Passion</title>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
    <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

     <script type="text/javascript">
         $(document).ready(function () {
             // prepare the data
             var data = new Array();
             var firstNames =
             [
                 "Sibeesh", "Ajay", "Ansary", "Aghil", "Shanto", "Libin", "Vignesh", "Ramesh", "Sathian", "Elango", "karthik"
             ];

             var lastNames =
             [
                 "Venu", "Bhasy", "Rasheed", "Ghosh", "Thomas", "Lawrence", "Vicky", "K", "K", "S", "Srinivasan"
             ];

             var productNames =
             [
                 "Shoe", "Sandals", "Shampoo", "Soap", "Hair Lotion", "Creams", "Bags", "Watch", "Books", "Mobile", "Tab", "Laptop"
             ];

             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"
             ];

             
             var generatedata = function (startindex, endindex) {
                 var data = {};
                 for (var i = startindex; i < endindex; i++) {
                     var row = {};
                     var productindex = Math.floor(Math.random() * productNames.length);
                     var price = parseFloat(priceValues[productindex]);
                     var quantity = 1 + Math.round(Math.random() * 10);

                     row["id"] = i;
                     row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                     row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                     row["productname"] = productNames[productindex];
                     row["price"] = price;
                     row["quantity"] = quantity;
                     row["total"] = price * quantity;

                     data[i] = row;
                 }
                 return data;
             }

             var source =
             {
                 datatype: "array",
                 localdata: {},
                 totalrecords: 1000000
             };

             // load virtual data.
             var rendergridrows = function (params) {
                 var data = generatedata(params.startindex, params.endindex);
                 return data;
             }
             var dataAdapter = new $.jqx.dataAdapter(source);

             $("#jqxgrid").jqxGrid(
             {
                 width: 850,
                 source: dataAdapter,
                 virtualmode: true,
                 rendergridrows: rendergridrows,
                 columns: [
                     { text: 'Id', datafield: 'id', width: 100 },
                     { text: 'First Name', datafield: 'firstname', width: 120 },
                     { text: 'Last Name', datafield: 'lastname', width: 120 },
                     { text: 'Product', datafield: 'productname', width: 180 },
                     { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                     { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                     { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                 ]
             });
         });
    </script>

</head>
<body>
    <h3>Load Data To Grid On Scroll  - Sibeesh Passion</h3>
    <br />
    <div id="jqxgrid"></div>
</body>
</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?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

TagsjQWidgetJQX GridLoad data dynamicallyLoad Data To Grid On Srollrendergridrowsvirtualmode
Previous Article

Caching In MVC

Next Article

Regex to remove a word from a ...

0
Shares
  • 0
  • +
  • 0
  • 0
  • 0
  • 0

SibeeshVenu

I'm neither an expert nor a guru. I have been awarded Microsoft MVP 2 times , C# Corner MVP 4 times, DZone MVB( Most Valuable Blogger). I always love to learn new technologies, I believe the one who stop learning is old. You are always welcome to ask any doubts if you have any, I would be more than happy to help. Please feel free to follow me on any social media network, I really like to get connected with you.

Related articles More from author

  • ArticleJQWidgetsJQX GridProducts

    Bind Json Data to JQWidget JQX Grid

    June 18, 2015
    By SibeeshVenu
  • ArticleJQWidgetsJQX GridJQX List BoxProducts

    Show/Hide Columns in JQWidgets JQX Grid

    June 19, 2015
    By SibeeshVenu
  • Code SnippetsJQWidgetsJQX Grid

    Assign New Data Source To JQWidgets JQX Grid

    July 24, 2015
    By SibeeshVenu
  • Grid with check box selection
    ArticleJQWidgetsJQX GridProducts

    Implement radio button selection in JQWidgets JQXGrid using checkbox

    June 29, 2016
    By SibeeshVenu
  • Code SnippetsJQWidgetsJQX GridProducts

    Get jqwidget jqx grid column count

    June 19, 2015
    By SibeeshVenu
  • Dynamically apply colour coding in Grid
    ArticleHow toJQWidgetsJQX Grid

    Dynamically Apply Colour Coding in Grid With Dynamic Headers And Data

    February 16, 2016
    By SibeeshVenu

Recommends for you

  • Article

    How to Fix Exchange Server Dirty Shutdown State Errors

  • ArticleHighChart

    Working With Charts

  • Empty Solution
    ArticleASP.NETC#CodeProjectHow toSQL

    Encrypt And Decrypt ConnectionString In Web.Config File

  • new_node_js_web_application
    ArticleCodeProjectHow toNode JS

    Upload Files Or Images To Server Using Node JS

MICROSOFT MVP (2)

profile for Sibeesh Venu - Microsoft MVP

Stack Overflow

profile for Sibeesh Venu at Stack Overflow, Q&A for professional and enthusiast programmers

C# CORNER MVP

profile for Sibeesh C# Corner - A Social Community of Developers and Programmers

DZONE MVB

profile for Sibeesh Venu - DZone MVB

CODE PROJECT

TIMELINE

  • April 22, 2018

    Validation Using Template Driven Forms in Angular 5

  • April 22, 2018

    Implement Shared Custom Validator Directive in Angular

  • April 21, 2018

    What is SharePoint? Explore its Top 10 Benefits & Advantages

  • April 7, 2018

    What’s the Difference Between OneDrive and Onedrive for Business Win 10

  • March 28, 2018

    How to Fix Exchange Server Dirty Shutdown State Errors

  • March 26, 2018

    Implementing Guard in Angular 5 App

  • March 17, 2018

    Office 365 Export PST Tool – Great Results with 100% Accuracy

  • March 17, 2018

    Migrate Files From OneDrive to OneDrive for Business by SysTools

  • AngularArticleHow to

    Validation Using Template Driven Forms in Angular 5

    Introduction In this post, we are going to see how to do validation using template driven forms in Angular 5, this is just a different approach that you can follow, as ...
  • AngularArticleHow to

    Implement Shared Custom Validator Directive in Angular

    Introduction In this post, we are going to see how to create a custom validator directive in Angular 5. We have already seen how to do validation in our previous ...
  • ArticleSharePoint

    What is SharePoint? Explore its Top 10 Benefits & Advantages

    Introduction In this era of cloud computing and collaborative platform, SharePoint is a familiar name to the people of the business industry. The fact that more than 85% of Fortune ...
  • ArticleMicrosoft WindowsWindows 10

    What’s the Difference Between OneDrive and Onedrive for Business Win 10

    Introduction Unless you are completely ignorant of cloud technology, you must have heard of the term OneDrive. These days we also hear about OneDrive for Business (ODfB). Some people even ...
  • Article

    How to Fix Exchange Server Dirty Shutdown State Errors

    Introduction About Dirty Shutdown State Error Microsoft Exchange Server database works with Extensible Storage Engine (ESE), which is also known as the JET engine at the core. This Jet engine ...

Archives

  • April 2018
  • March 2018
  • February 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • August 2014
  • December 2013

Recent Posts

  • Validation Using Template Driven Forms in Angular 5
  • Implement Shared Custom Validator Directive in Angular
  • What is SharePoint? Explore its Top 10 Benefits & Advantages
  • What’s the Difference Between OneDrive and Onedrive for Business Win 10
  • How to Fix Exchange Server Dirty Shutdown State Errors
  • Implementing Guard in Angular 5 App
  • Office 365 Export PST Tool – Great Results with 100% Accuracy
  • Migrate Files From OneDrive to OneDrive for Business by SysTools
  • Continue With Learning Indexes in MongoDB
  • Learn MongoDB With Me – Part 2
  • Video: 21 Easy Tips for Healthy Life
  • Learn MongoDB With Me
  • Why Office 365 Calendar Permissions Not Working- Solution
  • SQL Log File Corruption and Possible Recovery Methods
  • Creating a Chat Application in Node JS with Express, MongoDB, Mongoose and Socket.io

ABOUT ME

I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP, C# Corner MVP, DZone MVB. My hobbies are reading, writing, blogging and riding my Royal Enfield Thunderbird.

Sibeesh Passion is a non-profit organization which is created for sharing knowledge and widen our thoughts. You are welcome to be a part of it.

CONTACT ME

  • X 384 / A, Katrikkal House, Vembilly Post, Kunnathunadu Panchayat, Ernakulam - 683565, Kerala, India
  • 08893 08893 2
  • info@sibeeshpassion.com

TAG CLOUD

Achievements ADOMD Angular Angular 5 Angular JS article Article Of The Day Asp.Net Azure C# c-sharp corner Career Advice chart code snippet CSharp CSS CSS3 Database HighChart How To HTML5 HTML5 Chart Interview Javascript JQuery jquery functions JQWidgets JQX Grid Json Microsoft MongoDB MVC News Node JS Products Royal Enfield SQL SQL Server Visual Studio Visual Studio 2017 VS2017 Web API Windows Windows 10 Wordpress

Follow Me

HOW MAY I HELP YOU

  • Home
  • About
  • Communities
  • Search
© Copyright Sibeesh Passion 2018-2019. All Rights Reserved.