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

ejGrid Questions

Hi, I have a web api that provides paged results.  I'd like the grid to be infinite scrolling in that each time the user scrolls down, it'll get the next set of results.  If the next set of results return empty, then it means there's no longer anymore results.  I cannot find anywhere that i can mimic this functionality.  Could someone please advise?

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 15, 2016 08:39 AM UTC

Hi Phu, 

We suspect that you would like to replace the paging in Grid with scrolling functionality and perform loading on demand concept to load the successive pages. By default ejGrid provides the virtualization concept to enable this functionality. We have two types of virtual scrolling in ejGrid such as Continuous and Normal modes. Normal mode allows you to load the grid with data while scrolling, whereas in Continuous mode, the data is loaded in grid when the scrollbar reaches the end. Refer to the following code example and Help Document. 

<div id="Grid"></div> 
<script type="text/javascript"> 
        $(function () { 
                dataSource: ej.DataManager({ 
                    url: "/api/Values", 
                    adaptor: new ej.WebApiAdaptor() 
                allowScrolling: true, 
                scrollSettings: { height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous }, 
                . . . . 

        public IHttpActionResult Get(ODataQueryOptions<Order> opts) 
            var obj = new NorthWndDataContext().Orders.ToList(); 
            var result = new PageResult<Order>(opts.ApplyTo(obj.AsQueryable()) as IEnumerable<Order>, null, obj.Count); 
            return Ok(result); 

We have provided only limited support to virtual scrolling method. The following list of Grid feature will not work when Virtual Scrolling is enabled. 

· Editing 
· Frozen rows and columns 
· Cell Merging 
· Responsive Grid 
· Grouping 
· Detail Template and Hierarchy Grid 

We have prepared a sample with the scrolling that can be downloaded from the following location. 

Seeni Sakthi Kumar S. 

PT Phu Trieu June 15, 2016 04:05 PM UTC

Instead of a url, i'd like to use a callback that returns an array of objects.  Is this possible?

TS Thavasianand Sankaranarayanan Syncfusion Team June 16, 2016 01:26 PM UTC

Hi Phu, 
We have achieved your requirement by using the UrlAdaptor. For your convenience we have created the sample the same can be downloaded from this below link. 
Please refer to the below code example. 
        .Datasource(d => d.URL("/Home/partialGrid").Adaptor("UrlAdaptor"))         
        .ScrollSettings(cl => { 
public ActionResult partialGrid(DataManager dm) 
            var DataSource = OrderRepository.GetAllRecords().ToList(); 
            DataResult result = new DataResult(); 
            result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList(); 
            result.count = DataSource.Count(); 
            return Json(result, JsonRequestBehavior.AllowGet); 
To know more about the Adaptor and DataOperation please refer the below help documents 
Thavasianand S. 

PT Phu Trieu June 16, 2016 04:08 PM UTC

I was actually looking for something more in the lines of this

//Some JS function that returns an array of objects
function getData(size, page);

I would like to use this function to grab the data instead of a URL.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 17, 2016 12:03 PM UTC

Hi Phu, 

We suspect that you would like to bind the local data to Grid and bind the data rows while the scroller reaches its end. We have extended the UrlAdaptor to achieve this requirement. Refer to the following code example. 

<div id="Grid"></div> 
<script src="~/Scripts/jsondata.min.js"></script> 
<script type="text/javascript"> 
    $(function () { 
        var customAdaptor = new ej.UrlAdaptor().extend({ 
            processResponse: function (data, ds, query, xhr, request, changes) { 
                var obj = $("#Grid").ejGrid("instance"); 
                var pageSize = obj.model.pageSettings.pageSize; 
                var currentPage = obj.model.pageSettings.currentPage; 
                result = getData(pageSize, currentPage); 
                return result; 
        function getData(size, cPage) { 
            var skip = 0, take = 0; 
            if (cPage > 1) 
                skip = size * cPage; 
            take = size; 
            var count = window.gridData.length; 
            if (count == skip) 
                skip = skip - size; 
            var result = ej.DataManager(window.gridData).executeLocal(new ej.Query().skip(skip).take(take)); 
            return { result: result, count: count }; 
            dataSource: ej.DataManager({ 
                json: [], 
                adaptor: new customAdaptor() 
            allowScrolling: true, 
            scrollSettings: { 
                height: 300, 
                allowVirtualScrolling: true, 
                virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous 
            . . . . . .  

If you would like to handle the filtering, sorting for the Grid in the same way, you can use the corresponding instance of each Grid APIs as follows. 

Filtering – filterSettings.filteredColumns 
Sorting – sortSettings.SortedColumns 

Refer to the following Help Document. 

We have prepared a sample that can be referred from the following jsPlayground. 

Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon