1

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:

  1. 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"))
    
          )
    

    }

  2. 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);
    }
    
  3. 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.

2
  • FWIW, I know only getting the records you need has an issue with paging in the ListView client-side components, as it requires all of the data bound to the list. The pager looks at the total number of records and pages on the client. I ended up using a custom pager (bootstrap paginator) so that I only showed the records necessary. That would be why paging with a custom resultset wouldn't work. So either load all of the results at once, or use a custom pager to get the paging to work. Sep 3, 2014 at 12:16
  • Thanks Brian. Yeah I realized that but I believe Kendo might have fixed it or provides some work around. Let's see others suggestion. I posted on their forum as well so will get official response soon.
    – SBirthare
    Sep 3, 2014 at 12:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.