Kendo Ui Grid - fetching only page number of rows on the inital request

Question

I've read several posts here and also the tutorials on Telerik website, but they are lacking - and the documentation is off. Hoping for a quick fix after hours of reading.

I'm trying to use a Kendo grid with a huge amount of rows (1M). In the examples on the site, I see that the view controller action is returning the whole data set. Fetching all of the rows is very expensive process and the data set is huge.

My question is how can I configure the grid in such a way that every subsequent callback will return the next page and the initial call will not fetch all of rows at once?

My code is similar to:

//Main controller action
    public ActionResult Index()
    {
                List<items> listItems = GetAllItems(); // very expensive call!

                return View(listItems);
    }

// my view for that action
    @(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
          {
              //some columns...
          })

        .Pageable(page=>page.PageSizes(true)) //Enable paging - I suspect here I can fix
         .DataSource(datasource =>datasource.Ajax().PageSize(20).Read(read => read.Action("MoreItems", "Index")).ServerOperation(true)) // tried all sorts of things here
         .Sortable()
         .Filterable()
    )


// the callbacks for the ajax
    public ActionResult MoreItems([DataSourceRequest] DataSourceRequest request)
            {
                return Json(GetAllItems().ToDataSourceResult(request));
    }
    //add some cache just to see what was holding the thing up
    [OutputCache(Duration = 3600, VaryByParam = "none")]
    private static List<items> GetAllItems()
    {
        //some code to retrieve items
    }

(from the examples it looks like the initial call is returning the complete model - and subsequent calls to the Products_Read are on the filter object. How can the initial call be filtered as well but allow for future paging - in my case I have 100k+ rows and it is impossible to do "return View(model") ) Thanks!

Solution 1

Seems that have not been very lucky with Kendo information... What you are looking for is called serverPaging (documentation under framework DataSource in here).

For each request your server will receive:

• take contains the number of records to retrieve
• skip how many records from the front of the dataset to begin reading
• page the index of the current page of data
• pageSize the number of records per page

You might also consider using scrollable.virtual (documentation in here where the following pages are loaded while you scroll down in the grid.

This example (http://demos.kendoui.com/web/grid/remote-data.html) uses serverPaging.

Solution 2

It seems that you are not familiar with the LINQ expression engine. The whole collection is never retrieved. The ToDataSourceResult method is doing exactly this - applying paging/sorting/grouping on a database level (thanks to that expression engine).

You do not have to do anything - just pass the IQueryable collection (which holds all the records) to the DataSourceResult, do not call ToList before this(or anything similar) or the magic will be broken :)

Comments

[Avba]

The problem is I am not doing only database queries, but also queries against storage , if I have to list all items in storage this still takes ages ... Is there anyway to populate some dummy data?

[Petur Subev]

I dont understand you , could you clarify?

[Avba]

I am not using entity or something that can do lazy loading. I am going over the network and fetching file structure, attributes, metadata etc. This is slow, so I want to have some dummy data in the grid, and only when the grid is showing that page and does the ajax call back to the server for filtering, actually look up those files. The problem is that I wasn't able to only send "1 page" worth of data to the grid and have the grid continually request additional pages. The grid would only show that one page, and not continue making requests to the server for the next one.

[Avba]

I would like to be able to configure the grid to have, lets say 1000 rows, while initially only sending 20, if the grid requests the next page, then go over the network and fetch the data. In 99.9999% of the time, the first 3-10 pages of data are enough, but still i need the ability to query all of the data.

[Petur Subev]

Too bad you are not using lazy loading. Why you pass that Collection for initial binding then? You can simply use @(Html.Kendo().Grid<TheModel>(). I am really loosing the point here. Also keep in mind that the Grid is actually serializing only the records for the first page. Press ctrl+U check the initial page rendered. Also Use the network tab to inspect the Ajax calls and see that only records for a single page are coming.