ejGrid support for infinite scrolling?

[Christopher Hui]

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]

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. 

Link: https://jsplayground.syncfusion.com/qr54l3bb 

Also refer the documentation and online sample link. 

Link: https://help.syncfusion.com/js/grid/scrolling#virtual-scrolling 

Online sample link: https://js.syncfusion.com/demos/jquery/#!/bootstrap/grid/scrolling/virtualscrolling 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Christopher Hui]

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]

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. 

Link: https://www.syncfusion.com/downloads/support/forum/128166/ze/MvcApplication66-2133567177 

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: 

Link: https://help.syncfusion.com/js/datamanager/data-adaptors#url-adaptor 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai