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 Questions

Thread ID:

Created:

Updated:

Platform:

Replies:

124560 Jun 14,2016 05:57 PM Jun 17,2016 08:03 AM JavaScript 5
loading
Tags: ejGrid
Phu Trieu
Asked On June 14, 2016 05:57 PM

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?

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 15, 2016 04:39 AM

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 () { 
            $("#Grid").ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "/api/Values", 
                    adaptor: new ej.WebApiAdaptor() 
                }), 
                allowScrolling: true, 
                scrollSettings: { height: 300, allowVirtualScrolling: true, virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous }, 
                . . . . 
            }); 
        }); 
</script> 

        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. 


Regards, 
Seeni Sakthi Kumar S. 


Phu Trieu
Replied On June 15, 2016 12:05 PM

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 16, 2016 09:26 AM

  
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. 
 
[Razor] 
@(Html.EJ().Grid<Sample.Models.OrdersView>("Grid") 
        .Datasource(d => d.URL("/Home/partialGrid").Adaptor("UrlAdaptor"))         
        .AllowScrolling() 
        .ScrollSettings(cl => { 
            cl.AllowVirtualScrolling() 
                .Height(300)                 
                .VirtualScrollMode(VirtualScrollMode.Continuous); 
         }) 
) 
  
[Controller] 
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 
  
Regards, 
Thavasianand S. 


Phu Trieu
Replied On June 16, 2016 12:08 PM

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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 17, 2016 08:03 AM

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 }; 
        } 
 
        $("#Grid").ejGrid({ 
            dataSource: ej.DataManager({ 
                json: [], 
                adaptor: new customAdaptor() 
            }), 
            allowScrolling: true, 
            scrollSettings: { 
                height: 300, 
                allowVirtualScrolling: true, 
                virtualScrollMode: ej.Grid.VirtualScrollMode.Continuous 
            },  
            . . . . . .  
        }); 
    }); 
</script> 


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. 


Regards, 
Seeni Sakthi Kumar S. 


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.

;