Kendo grid virtual scrolling (endless scrolling) does not work

Question

I want to turn on the endless scrolling on a kendo grid, called in this framework as virtual scrolling.

Abstract:

1) I load the page => the Action Virtualization_Read is called (OK)
2) I scroll down the Grid till bottom => the Action Virtualization_Read is called anothter time in order to get more data (KO)

The result is that when I reach the bottom of the grid, with scrollbar, the Action method that retrives the data is not hit anymore.

This is my grid, it shows the traces generated in my application:

@(Html.Kendo().Grid<Credit.Entity.ServiceObjects.MsgBlock>(Model.ListadoTrazas)
                                    .Name("grdTrazas")
                               .Columns(columns =>
                               {
                                   columns.Bound(c => c.LogID).Filterable(true);
                                   columns.Bound(c => c.Timestamp).Filterable(false);
                                   columns.Bound(c => c.FormattedMessage).Filterable(false).Width("80%");

                               })
                               .Scrollable(s => s.Virtual(true))
                               })

                               .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(100)
                                    .ServerOperation(true)
                                    .Read(read => read.Action("Virtualization_Read", "Logging"))
                                 )

                                )

And this is the MVC3 Action that fetches the data. This Action is called only the first time, when the page is loaded:

public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(GetData(request.Page, request.PageSize).ToDataSourceResult(request));
    }

    [NonAction]
    private List<MsgBlock> GetData(int page, int getCount)
    {
        MVCLogging model = new MVCLogging();

        // Fetches the data
        return model.ListadoTrazas;
    }

The Model MsgBlock has the same properties defined in the Grid Columns method:

LogId
TimeStamp
FormattedMessage

Do I forget anything?

Kyle Magilavy Kyle Magilavy · Accepted Answer · 2014-12-03T18:52:39

The only potential issue I see here is that you are leveraging server operations on the grid, but initializing the grid with a collection of data instead of letting it fetch the initial data. In the Kendo demo for virtualization using the MVC extensions, the grid definition looks like:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(o => o.OrderID).Width(60);
    columns.Bound(o => o.CustomerID).Width(90);
    columns.Bound(o => o.ShipName).Width(220);
    columns.Bound(o => o.ShipAddress).Width(280);
    columns.Bound(o => o.ShipCity).Width(110);
    columns.Bound(o => o.ShipCountry).Width(110);
})
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(100)
    .Read(read => read.Action("Virtualization_Read", "Grid"))
 )
)

Notice that after the type is supplied (Kendo.Mvc.Examples.Models.OrderViewModel) there is no initial set of data supplied, whereas your initialization attempts to give the grid the data it needs to render (Model.ListadoTrazas). Perhaps this is confusing the grid into thinking it has all the data is needs? I would try taking out Model.ListadoTrazas and letting the grid reach out for the data from the get go.

Kendo grid virtual scrolling (endless scrolling) does not work

1 Answers