I am using Kendo MVC grid control and all working fine. We load records (using AJAX) in the grid and have been using virtual scroll and paging successfully. The thing that we have noticed is (across all example of Kendo grid including online), every time new data to be loaded (i.e. scroll or page change), the request goes to server which cause data (all records) to be retrieved from the data source.
Until now we have had a limit of max 500 records to be displayed in the grid. But now we need unlimited record that can go upto 10K, in which case we do not want to fetch all record from the database.
My implementation:
The view looks like this (not including everything):
@using (Html.BeginForm()) { @Html.AntiForgeryToken() @(Html.Kendo().Grid<ProspectEquipmentGridModel>() .Name("ProspectEquipmentGridModel") .Columns(columns => { columns.Bound(p => p.VinSn).Title("VIN #"); columns.Bound(p => p.VehicleBrand).Title("Vehicle Brand"); columns.Bound(p => p.Model).Title("Model"); columns.Bound(p => p.Year).Title("Year").Width(50); columns.Bound(p => p.GvwrClass).Title("GVWR").Width(65); columns.Bound(p => p.EqtType).Title("Type"); columns.Bound(p => p.EngineBrand).Title("Engine Brand"); columns.Bound(p => p.SeriesCode).Title("Series Code"); columns.Bound(p => p.EngineType).Title("Type"); columns.Bound(p => p.FleetOutOfService).Title("Fleet Out of service"); }) .Selectable(selectable => selectable.Mode(GridSelectionMode.Single)) .Sortable(sortable => sortable.AllowUnsort(false)) .Scrollable(scrollable => scrollable.Height("400px")) //.Scrollable(scrollable => scrollable.Virtual(true)) .Pageable(pageable => pageable .Refresh(false) .PageSizes(false) .ButtonCount(10) ) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Model(model => model.Id(p => p.Rrid)) .Read(read => read.Action("GetProspectEquipmentGridData", "ProspectProfile", new {data = Model.AuthenticationToken, showFiltered = true})) .Events(e => e.Change("UpdateCount")) ) .Events(e => e.DataBound("ListViewDataBound")) )
}
The initial request goes to the server (controller method).
public ActionResult _ProspectProfileEquipmentTab(string data) { var totalVehicleCounts = _factRepository.TotalVehiclesOwned(Rrid, null); var filteredVehicleCounts = _factRepository.TotalVehiclesOwned(Rrid, _searchCriteriaService.GetSearchCriteria(SearchId)); var model = new ProspectProfileEquipmentViewModel() { AuthenticationToken = data, SearchId=SearchId, Rrid = Rrid, UserType = UserType, TotalVehicles = totalVehicleCounts, FilteredVehicles = filteredVehicleCounts }; return View(model); }
Server returns the initial data, and the kendo grid loads itself calling DataSource.Read method:
public ActionResult GetProspectEquipmentGridData([DataSourceRequest] DataSourceRequest request, string data, bool showFiltered) { IEnumerable<ProspectEquipmentGridModel> model = new List<ProspectEquipmentGridModel>(); int startIndex = request.PageSize * (request.Page - 1); if (showFiltered && !UserType.Equals("QuickSearchUser")) { var searchCriteria = _searchCriteriaService.GetSearchCriteria(SearchId); model = _factRepository.GetDataForProspectEquipmentGrid(searchCriteria, Rrid, startIndex, request.PageSize); } else { model = _factRepository.GetDataForProspectEquipmentGrid(null, Rrid, startIndex, request.PageSize); } // Commenting following line which works but I want only limited number of record to go from // server to client //return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); // Try 1 - Sending only 20 records return Json(model, JsonRequestBehavior.AllowGet); // Try 2: var gridData = model.ToDataSourceResult(request); gridData.Total = _factRepository.TotalVehiclesOwned(Rrid, null);return Json(gridData, JsonRequestBehavior.AllowGet); }
As shown in above code (see commented), we need to fetch all records say 500 and then use ToDataSourceResult() on it to get the grid working properly.
I tried to send startIndex and count to database, getting only 20 records (PageSize) at a time but if I send only 20 records, the grid does not display properly.
I understand the grid needs to know how many records present to compute number of pages but I believe there is some way I am missing that will allow me to optimize my code.
My objective is to
either not go to database again and again for each page change request
OR
only fetch records = PageSize.
Please share if you know a way to achieve it.