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.
Unfortunately, activation email could not send to your email. Please try again.

ejGrid support for infinite scrolling?

Thread ID:

Created:

Updated:

Platform:

Replies:

128166 Jan 5,2017 03:24 PM Jan 9,2017 05:07 AM JavaScript 3
loading
Tags: ejGrid
Christopher Hui
Asked On January 5, 2017 03:24 PM

Is there support for the ejGrid to have infinite scrolling?

By infinite scrolling, I mean, when the user scrolls and approaches the bottom of the grid, more data is loaded and populates the grid.

Is this possible?

Mani Sankar Durai [Syncfusion]
Replied On January 6, 2017 07:19 AM

Hi Christopher, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suggest you to use virtualScrolling feature by enabling the property as allowVirtualScrolling and setting virtualScrollMode as continuous which is the property of scroll settings in grid.
 Please refer the below code example
$(function () {
            var element = $("#Grid");
            element.ejGrid({
                dataSource: window.virtualData,
                allowScrolling: true,
                scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous },
                columns: [
                                               
                ]
            });
       });
We have also prepared a sample that can be available from the below link. 

Also refer the documentation and online sample link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Christopher Hui
Replied On January 6, 2017 11:53 AM

What if the data source is not completely loaded yet?

For example, I load the first 200 entries, then once I reach 300px from the bottom of the grid, I make an AJAX request to retrieve the next 200 entries and it populates at the bottom of the grid.

Is doing something like that possible?

Mani Sankar Durai [Syncfusion]
Replied On January 9, 2017 05:07 AM

Hi Christopher, 

We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 
In this we have used the adaptor type as UrlAdaptor in which the AJAX post takes place internally. When we move to scrollbar to the bottom of the grid AJAX post will takes place and retrieve the next page data based on page size to the grid. 

Please refer the below code example. 
[Index.cshtml] 
<div id="Grid"></div> 
 
<script type="text/javascript"> 
    $(function () { 
   $("#Grid").ejGrid({ 
            dataSource: ej.DataManager({ 
                url: "/Home/DataSource", 
                adaptor: new ej.UrlAdaptor(), 
               
            }), 
            allowScrolling: true, 
            scrollSettings: { width: "auto", height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous }, 
            columns: [  
                                ..... 
 
            ] 
        }); 
    }); 
</script> 
[Controller.cs]          
public ActionResult DataSource(DataManager dm) 
        { 
            var DataSource = OrderRepository.GetAllRecords(); 
            DataResult result = new DataResult(); 
            result.count = DataSource.Count(); 
            result.result = DataSource.Skip(0).Take(12); 
            return Json(new { result = result.result, count = result.count }, JsonRequestBehavior.AllowGet); 
        } 
 

 

Check the screenshot that next page data has retrieved using skip and take. 

Also please refer the documentation link: 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;