Grid Loading when using SQL paging

[Daniel]

This is for ASP.NET MVC

 

I have a grid that on scrolling hits the controller and does true sql paging.  So each time you scroll it hits the controller that calls sql and gets the next 100 rows of data. This was working fine until we upgraded from a 2019 version of Kendo to the 2024.1.130.545 version.  It all still works but as you scroll it gets slower and slower with each group of 100, the sql calls are all still fast but loading the data on the screen slows down exponentially on each set of 100.

This is the grid code we have set.

.NoRecords(x => x.Template("<div class='empty-grid' style='height: 300px; padding-top: 50px'>There are no units that match your search criteria. <br /><br /> Please expand your search criteria and try again.</div>"))
.Sortable(sortable => sortable.Enabled(true).SortMode(GridSortMode.SingleColumn))
.ColumnMenu()
.Resizable(resize => resize.Columns(true))
.Filterable(filterable => filterable
.Mode(GridFilterMode.Row)
.Extra(false)
.Operators(operators => operators
    .ForString(str => str.Clear()
        .Contains("Contains")
        .StartsWith("Starts with")
        .IsEqualTo("Is equal to")
        .IsNotEqualTo("Is not equal to")
        .DoesNotContain("Does Not Contain")
        .EndsWith("Ends WIth")
        .IsEmpty("Is Empty")
    ))
)

.Reorderable(reorder => reorder.Columns(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Scrollable(scrollable => scrollable.Endless(false).Height(600))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
    .FileName("UnitSearchExport.xlsx")
    .Filterable(true)
    .AllPages(true)
    .ProxyURL(Url.Action("Excel_Export_Save", "Functions"))
)
.DataSource(dataSource => dataSource
.Ajax()
.AutoSync(false)
.ServerOperation(false)
.Model(model =>
{
    var Modelinfo = new Infinity.Vehicle.Inventory.Vehicles_Listing.VehicleListInfo();
    var Stock_Number = Modelinfo.Stock_Number;

    model.Id(p => Stock_Number);
}))
.Events(e => e
    .Filter("UnitInventoryListInfiniteScrollGrid_OnFiltering")
    .Sort("UnitInventoryListInfiniteScrollGrid_OnSorting")
    .ExcelExport("UnitInventoryListInfiniteScrollGrid_OnExcelExport")
    .DataBound("UnitInventoryListInfiniteScrollGrid_OnDataBound")
))

 

 

Then on Scroll it basically does this.

  var dataSourceUnitListing = new kendo.data.DataSource({
      data: [
          response.Listing
      ]
  });

  unitListingGrid.dataSource.data().push.apply(unitListingGrid.dataSource.data(), dataSourceUnitListing.options.data[0]);

  amountOfUnitsShownOnGrid = unitListingGrid.dataSource.view().length;

[Anton Mironov]

Hi Daniel,

Thank you for the code snippets and the details provided.

In order to increase the performance, I would recommend setting the Server operations to true. The server handles the data operations faster than the client(browser).

Another step for better performance is to use Virtualization of the data:

• https://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data

The following article provides additional information about the Virtualization approach:

• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/virtual

The following BlogPost lists the best practices for increasing the performance of the Grid:

• https://www.telerik.com/blogs/how-to-get-the-best-grid-performance

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik