We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. WinForms
  4. How to perform Lazy Loading and Fetch Data dynamically when scroll down to the bottom of the Grid.

How to perform Lazy Loading and Fetch Data dynamically when scroll down to the bottom of the Grid.

Hello SyncFusion Team, 

I am having a dataset of almost 100,000 rows in my DB and the requirement is to show the same without pagination but on a single grid. I want that every time 200 rows are fetched as I scroll down. For the same, I have written following code but nothing seems to work:

I am not sure what I am missing. Even in the response, I am sending result carrying an array of 200 rows and count of 10000.

A Post API is taking place at the first go with RequestPayload is carrying object { requiresCounts: true } but after scrolling down to the bottom of the page the API is not
 getting triggered.

var dataManager = new ej.data.DataManager({
url: 'http://localhost:4545/api/rawData/getData?size=200',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
});

var grid = new ej.grids.Grid({
 dataSource: dataManager,
 allowScrolling: true,
 allowVirtualScrolling: true,
 height: 250,
 scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: "continuous" },
 pageSettings: { pageSize: 20 },
 pageSettings: { enableQueryString: true },
 columns: [
  { field: 'id', width: 140, headerText: 'Index', type: 'number' },
  { field: 'firstname', width: 140, headerText: 'First Name', type: 'string' },
  { field: 'lastname', width: 140, headerText: 'Last Name', type: 'string' },
  { field: 'address', width: 140, headerText: 'Address', type: 'string' },
  { field: 'title', width: 140, headerText: 'Title', type: 'string' },
 ],
});
grid.appendTo(this.parent);


17 Replies
RR Rajapandi Ravi Syncfusion Team April 17, 2020 08:09 AM UTC

Hi Rahul, 

Greetings from syncfusion support 

Based on your query you have defined all the properties like EJ1 Grid control. In EJ2 Grid to setup the virtualization you need to define enableVirtualization as true and content height by height property.  

So we suggest you to follow our Documentation and sample demos to overcome your issue.  

For your reference we have prepared a sample of Url adaptor with virtualization. Please refer the below code example, documentation and sample for more information. 

<script type="text/javascript"> 
    $(function () { 
        var data = new ej.data.DataManager({ 
            url: '/Home/UrlDatasource', 
            adaptor: new ej.data.UrlAdaptor(), 
            crossDomain: true 
        }); 

        var grid = new ej.grids.Grid({ 
            dataSource: data, 
            height: 300, 
            enableVirtualization: true, 
            toolbar: ['Search'], 
            pageSettings: { pageSize: 200 }, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isPrimaryKey: true }, 
                { field: 'EmployeeID', width: 140, headerText: 'Employee ID' }, 
                { field: 'CustomerID', headerText: 'Customer ID', width: 120 } 
            ] 
        }); 

        grid.appendTo('#Grid'); 

    }); 


</script> 




Regards,
Rajapandi R 


RG Rahul Garg replied to Rajapandi Ravi April 17, 2020 09:57 AM UTC

Hi Rahul, 

Greetings from syncfusion support 

Based on your query you have defined all the properties like EJ1 Grid control. In EJ2 Grid to setup the virtualization you need to define enableVirtualization as true and content height by height property.  

So we suggest you to follow our Documentation and sample demos to overcome your issue.  

For your reference we have prepared a sample of Url adaptor with virtualization. Please refer the below code example, documentation and sample for more information. 

<script type="text/javascript"> 
    $(function () { 
        var data = new ej.data.DataManager({ 
            url: '/Home/UrlDatasource', 
            adaptor: new ej.data.UrlAdaptor(), 
            crossDomain: true 
        }); 

        var grid = new ej.grids.Grid({ 
            dataSource: data, 
            height: 300, 
            enableVirtualization: true, 
            toolbar: ['Search'], 
            pageSettings: { pageSize: 200 }, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isPrimaryKey: true }, 
                { field: 'EmployeeID', width: 140, headerText: 'Employee ID' }, 
                { field: 'CustomerID', headerText: 'Customer ID', width: 120 } 
            ] 
        }); 

        grid.appendTo('#Grid'); 

    }); 


</script> 




Regards,
Rajapandi R 


Hello @RajPandi, Thank you for the quick response, Rest now I have switched to EJS1 and I am finding it good and the issue is resolved.

Rest I am having another issue and that is, I want to perform scrolling without user interaction and for the same, I have written the below code and with this code the scroll is reaching to the end of the grid, but it is not triggering the lazy loading that is required. May you please assist me with the same?

Thank you
var grid = $("#target").ejGrid("instance");
grid.getScrollObject().scrollY((grid.getRowHeight() * grid.model.currentViewData.length), false);

RG Rahul Garg April 20, 2020 07:07 AM UTC

Hello Team SyncFusion,

I would highly appreciate your help. I have used lazy loading using EJ1 and the data is coming as I scroll down, Now what I have implemented is that a user can click a button and the Grid will scroll to the bottom and the expected behavior was that new data will get loaded but it is not happening.
 Looking forward to your support.

This is the code I have written:
var grid = $("#target").ejGrid("instance");
grid.getScrollObject().scrollY((grid.getRowHeight() * grid.model.currentViewData.length), false);





FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 20, 2020 04:12 PM UTC

Hi Rahul, 

We have checked your query and we suggest you to use nativeScroller to achieve this requirement instead of ejScroller. We have enabled the nativeScroller at dataBound event of the Grid with the below CSS styles to enable scroller. To use native scroller, we need to remove allowScrolling and scrollSettings property. 

Refer to the below code example:- 

<style> 
    .e-grid.scroll .e-gridcontent { 
        overflow-x: scroll !important; 
        overflow-y: scroll !important; 
    } 
 
    .e-grid.scroll .e-gridheader div:first-child { 
        border-right-width: 1px; 
        overflow-y: hidden; 
        overflow-x: hidden; 
    } 
 
    .e-grid.scroll .e-gridheader { 
        padding-right: 16px; 
        overflow-y: auto; 
        overflow-x: auto; 
    } 
</style> 
</head> 
<body> 
    <div class="control-section"> 
          <button type="button" onclick="Disable()">Scroll</button> 
                <div id="Grid"> 
                </div> 
            </div> 
        </div> 
    </div> 
 
    <script type="text/javascript"> 
   
      var virtualData1=[]; 
    $(function() { 
      dataSource(); 
       
      $("#Grid").ejGrid({ 
        // the datasource "window.gridData" is referred from jsondata.min.js 
 
                dataSource: virtualData1, 
                allowSorting: true, 
                allowPaging:true, 
                pageSettings: { pageSize: 54 }, 
                dataBound: function(args){ 
 
                          this.getContent().height(this.element.parent().height()).width(this.element.parent().width()); 
                          this.getHeaderContent().find("div").width(this.element.parent().width() - 17); 
                          this.element.addClass("scroll"); 
                          this.getContent().scroll(ej.proxy(function (e) { 
                         this.getHeaderContent().find("div:first-child").scrollLeft($(e.currentTarget).scrollLeft()); 
               }, this)); 
        }, 


function Disable() { 
       var grid = $("#Grid").ejGrid("instance"); 
        grid.getContent()[0].scrollTop =  100;  
    } 

Note:- We couldn’t use EnableVirtualization feature while using nativeScroller. 
  
Refer to the API Link:- 

Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 


RG Rahul Garg April 21, 2020 08:01 AM UTC

Hello Farveen,

I found this solution not working as first the virtualization is not there and second the page numbers are turning Nan because of the same.

Can you help me with one thing, At the end of every page scroll I want to refresh the datasource of the Grid. I am able to move scroll to the end of the page.

Now my dataSource was initially fetched using skip as 0 and take as 200. I want to make another call using DataSource where the skip will 200 and take as 200 after scrolling down.

Can you help me with that?

Thanks,


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 22, 2020 02:52 PM UTC

Hi Rahul, 

Query#:- At the end of every page scroll I want to refresh the datasource of the Grid. I want to make another call using DataSource where the skip will 200 and take as 200 after scrolling down. 
 
To achieve your requirement, we suggest you to use VirtualScrollMode as continuous. In Continuous mode, the data is loaded in Grid when the scrollbar reaches the end. 

Refer to the demo Link:- 

Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 



RG Rahul Garg April 27, 2020 01:49 PM UTC

Hello, Team SyncFusion I did implement the Virtual Scrolling with Continuous mode. Please check the implementation I already did. Rest the problem is when I scroll down through user interaction, the data is coming as expected as it is being fetched, but when I am scrolling down programmatically which is my requirement, it is not fetching the data. 

GL Gowri Loganathan Syncfusion Team April 28, 2020 12:49 PM UTC

Hi Rahul, 
 
Sorry for the inconvenience caused. 
 
We suggest you to use our gotoPage method to scroll the grid programmatically. Refer the below code example, 
 
Code snippet 
…………………. 
<button id="scroll">click to scroll</button>  // define button here 
<div id="Grid"></div> 
…………………. 
<script> 
          $(function () { 
               var element = $("#Grid"); 
                element.ejGrid({ 
                                       allowScrolling: true,              
                   scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous}, 
                                       ……………….. 
           $("#scroll").ejButton({ 
          click: function (args) { 
        var gridInst = $(".e-grid").ejGrid("instance"); 
        var page = gridInst.model.pageSettings.currentPage + 1; 
        if (page <= gridInst.model.pageSettings.totalPages) { 
            gridInst.gotoPage(page); 
        } 
 
    } 
});</script> 
 
Kindly refer the below sample link, 
 
Kindly refer the below API link, 
 
Please get back to us if you need more assistance. 
 
Regards, 
Gowri V L 
 


RG Rahul Garg April 28, 2020 01:14 PM UTC

Hello, team SyncFusion thank you for your response. But I am facing an issue during its implementation which as follows:

If my total rows are 100,000 and my page size is 100,  then the total number of pages I am having is 1000, Now if I use the gotoPage(1000) then it brings the data of the last page and appends in my data table and it leads to first 100 rows and last 100 rows which is incorrect! May you please suggest any better way to do the same.

Thanks.

GL Gowri Loganathan Syncfusion Team April 29, 2020 01:13 PM UTC

  
Hi Rahul, 
  
We deeply regret for the inconvenience caused. 
  
On further validating your requirement we don’t have support for scrolling programmatically in virtual scrolling Grid.  

Please revert us if you need more assistance. 
  
Regards, 
Gowri V L 
 


RO Ron August 20, 2020 05:21 AM UTC

Is it possible to do this in Winforms Charts?  I'm trying to render a Candlestick chart with millions of rows, and I want to only show a hundred at a time and allow the user to scroll or cursor through the rest which will be dynamically loaded.

I don't see an enableVirtualization setting in the Winforms Chart control though.

Is there a sample or some documentation you can point me to that demonstrates this?

Thanks!

Ron

LA Lavanya Anaimuthu Syncfusion Team August 21, 2020 01:16 PM UTC

Hi Ron, 
 
Greetings from Syncfusion. 
 
We have validated your query and you can achieve your requirement by setting the ZoomFactor and ZoomPosition for the ChartAxis as per the following code snippet. 
 
Code Snippet: 
 
chartControl1.PrimaryXAxis.ZoomFactor = 0.5; 
chartControl1.PrimaryXAxis.ZoomPosition = 0.5; 
 
 
Based on the ZoomPosition and ZoomPosition, only few data points show in chart and automatically the scrollbar enabled for the chart axis. You can see the other data points by scrolling the scrollbar. 
 
Please refer below ug link to know more about ZoomFactor and ZoomPosition: 
 
 
Screenshot: 
 
 
Thanks, 
Lavanya A. 


RO Ron August 21, 2020 03:10 PM UTC

Thank you very much for your response!  I see how the zoom can allow for the horizontal scrolling of data.  However, this sample doesn't show how to dynamically load data as the user scrolls.  I have millions and millions of records, and cannot load them all at once.  Is this possible in Winforms, and do you have a sample?

Thanks,

Ron

SS Sridevi Sivakumar Syncfusion Team August 24, 2020 04:32 PM UTC

Hi Rahul Garg,

We have validating the reported query, and we will update the details on or before August 25,2020. 
Regards,
Sridevi S. 


SM Saravanan Madheswaran Syncfusion Team September 2, 2020 07:39 AM UTC

Hi Rahul Garg, 
 
Sorry for the delay.  
 
In order to meet your requirement, to get data updates on the chart of your scrolling event, we need some more time to meet your requirement due to some complexity in achieving this. Therefore, we will update the full details on or before September 4,2020. 
 
Regards,  
Saravanan. 


RO Ron September 3, 2020 05:19 PM UTC

Thank you so much for your efforts and the update.  I suspect this will help many others who will try to accomplish something similar, since this a common scenario for financial charting.

SM Saravanan Madheswaran Syncfusion Team September 7, 2020 12:58 PM UTC

Hi Ron, 
 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  
 
  
Regards, 
Saravanan.

Loader.
Live Chat Icon For mobile
Up arrow icon