We are using the Kendo Grid for MVC and provider a software for agencies to see their list of clients. One of our grids is fairly large and has about 15 columns, and depending on the agency there can be upwards of 15,000 records returned within this single grid. We are noticing that the load time in this scenario is very long (9 seconds). I would have thought that by using ajax and paging that this time would be much lower and that as you change places or search in the headers it would do another call with those filters.
Here is what we have currently.
What can be done to speed up this grid?
@(Html.Kendo().Grid(Model) .Name("ClientsGrid") .Events(e => e .ColumnMenuInit("onColumnMenuInit")) .Columns(columns => { columns.Template(c => { }) .HeaderTemplate( @<text> @if (ViewBag.CanAddClients) { <a href='/clients/clientsAdd.asp?AgencyID=@Session["SelectedAgencyID"]'><i class='fas fa-plus fa-lg hidden-xs' id='ClientAdd' style='color: rgb(4, 167, 200); padding-right:4px' title='Client Add'></i></a> } </text>) .ClientTemplate(@"#=getAccessibleLinks(ClientID, DocCnt)#").MinScreenWidth(768).Width(130); columns.Bound(c => c.FirstName).Width(130).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith))); columns.Bound(c => c.LastName).ClientTemplate("#if (!LastName){#Null#} else {# #=LastName# #}#").Width(130).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith))); columns.Bound(c => c.Age).Sortable(true).HtmlAttributes(new { @class = "alignRight" }).MinScreenWidth(992).Width(80); columns.Bound(c => c.InsuredInsAndPayerName).Title("Primary Ins").MinScreenWidth(768).Width(150).Filterable(ftb => ftb.Multi(true).Search(true)); columns.Bound(c => c.Insured2InsAndPayerName).Title("Secondary Ins").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Multi(true).Search(true)); columns.Bound(c => c.RecordNumber).Title("Record #").HtmlAttributes(new { @class = "alignRight" }).MinScreenWidth(992).Width(110).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith))); columns.Bound(c => c.Status).MinScreenWidth(992).Width(100).Filterable(ftb => ftb.Multi(true).Search(true)); columns.Bound(c => c.StaffName).Title("Lead Staff").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith))); columns.Bound(c => c.TherapistName).Title("Therapist").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith))); columns.Bound(c => c.ClientTeamName).Title("Team").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Multi(true).Search(true)); columns.Bound(c => c.OfficeName).Title("Office").MinScreenWidth(992).Width(120).Filterable(ftb => ftb.Multi(true).Search(true)); columns.Bound(c => c.BillingReady).HeaderTemplate(@"<span class='hoverToolTip' title='<b>Billing Ready</b><br> If there is a Green Check icon, then your client is billing ready. Ortherwise, the client needs more information.'>BR</span>").ClientTemplate("#if (BillingReady){#<i class='far fa-check fa-md text-center' style='color:rgb(0, 133, 18);'>#}else {#<i class='far fa-times-circle fa-md text-center' style='color:rgb(196, 18, 48);'>#}#").HtmlAttributes(new { @class = "align-center" }).MinScreenWidth(768).Width(70); columns.Bound(c => c.DateExpIssue).Title("Exp").HeaderTemplate(@"<span class='hoverToolTip' title='<b>Expiration Issues</b><br> If a Red Icon is shown, then your client has expiration issues.'>Exp</span>").ClientTemplate("#if(DateExpIssue){#<i class='far fa-times-circle fa-md text-center' style='color:rgb(196, 18, 48);'>#}#").HtmlAttributes(new { @class = "align-center" }).Width(75).MinScreenWidth(768); columns.Bound(c => c.ClientID).Sortable(false).Title("CP ID").HtmlAttributes(new { @class = "alignRight" }).MinScreenWidth(992).Width(80); }) .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .Read(read => read.Action("GetClientsGridDetails", "Clients").Data("BindingClientsGrid")) .PageSize(ViewBag.pageSize) ) .ClientDetailTemplateId("template") .ToolBar(toolbar => { toolbar .Template( @<text> <div class="toolbar"> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 toolBarItem"> <label class="category-label" for="category">Client Status:</label> @(Html.Kendo().DropDownList().Name("ClientStatusID") .HtmlAttributes(new { @id = "ClientStatusID" }) .DataTextField("Status") .DataValueField("StatusID") .Value("0") .Text("Current Only") .Events(e => e.Change("filterClientsGrid")) .SelectedIndex(0) .DataSource(source => { source.Read(read => { read.Action("BindClientStatusDetails", "Clients"); }) .ServerFiltering(true); }) .AutoBind(false) ) </div> @if (ViewBag.UserType == "Staff") { <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 toolBarItem"> <label class="category-label" for="category">Staff Services:</label> @(Html.Kendo().DropDownList().Name("StaffServiceID") .DataTextField("StaffSeviceName") .DataValueField("StaffServiceId") .Events(e => e.Change("filterClientsGrid")) .Value("Active Only") .Text("Active Only") .DataSource(source => { source.Read(read => { read.Action("BindStaffServiceDetails", "Clients"); }) .ServerFiltering(true); }) ) </div> } else { <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"></div> } <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <h4 class="page-title text-center">@ViewBag.Title</h4> </div> </div> </text>); }) .Sortable() .ColumnMenu() .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) .Events(events => events .DataBound("onDataBound") ) .DataSource(dataSource => dataSource .Ajax() .ServerOperation(true) .Read(read => read.Action("GetClientsGridDetails", "Clients").Data("BindingClientsGrid")) .PageSize(ViewBag.pageSize) ) .Scrollable() .Pageable(x => x.PageSizes(new int[] { 50, 100, 250 })) .Resizable(resize => resize.Columns(true)) .Reorderable(reorder => reorder.Columns(true)) .NoRecords("No records found."))<script id="template" type="text/x-kendo-template"> <div class="container-fluid hidden-lg hidden-md"> <div class="row" style="background:rgb(160, 211,222) !important; padding-top:5px; padding-bottom:5px; text-align:center;"> <div class="col-xs-11"><b><span style="color:rgb(3, 140, 167);">Client Details</span></b></div> </div> <div class="row" style="background:white !important; border: 1px solid rgb(160, 211,222);"> <div class="col-md-3 col-sm-4"> <div style="text-align:center; border-bottom:1px solid color: rgb(255, 255, 255); " class="p-t-10"> <a href='/clients/Details/#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-user visible-xs' id='ClientsDetails' style='color:rgb(4, 167, 200); padding-right:4px;' title='Client Details'></i></a> <a href='/clients/Details/#=ClientID#?Tab=clientDocs' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-paperclip visible-xs' id='ClientDocs' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Docs'></i></a> <a href='/clientsservices/index/#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-hand-holding-heart visible-xs' id='ClientServices' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Service'></i></a> <a href='/clients/clientsAuths.asp?ClientID=#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-check-square visible-xs' id='ClientAuths' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Auths'></i></a> <a href='/clients/clientsEvents.asp?ClientID=#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-user-friends visible-xs' id='ClientEvents' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Events'></i></a> </div> <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Lead Staff:</b>#if(StaffName){# #: StaffName # #}#</div> <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Therapist:</b>#if(TherapistName){# #: TherapistName # #}#</div> <div class="p-b-10 hidden-lg hidden-md visible-sm visible-xs"><b>Team:</b>#if(ClientTeamName){# #: ClientTeamName # #}#</div> <div class="p-b-10 hidden-lg hidden-md hidden-sm visible-xs"><b>Office:</b>#if(OfficeName){# #: OfficeName # #}#</div> <div class="p-b-10 hidden-lg hidden-md"><b>Primary Ins:</b>#if(InsuredInsAndPayerName){# #: InsuredInsAndPayerName # #}#</div> <div class="p-b-10 hidden-lg hidden-md"><b>Secondary Ins:</b>#if(Insured2InsAndPayerName){# #: Insured2InsAndPayerName # #}#</div> </div> <div class="col-md-3 col-sm-4"> <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Age:</b>#if(Age){# #: Age # #}#</div> <div class="p-b-10 visible-xs"><b>Billing Ready:</b>#if(BillingReady){#<i class='far fa-check fa-md text-center' style='color:rgb(0, 133, 18);' />#}#</div> <div class="p-b-10 hidden-lg hidden-md hidden-sm"><b>Expiration Issues:</b>#if(DateExpIssue){# #: DateExpIssue # #}#</div> <div class="p-b-10 hidden-lg hidden-md hidden-sm"><b>Status:</b>#if(Status){# #: Status # #}#</div> <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Record Number:</b>#if(RecordNumber){# #: RecordNumber # #}#</div> </div> <div class="col-md-3 col-sm-4"> <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>CPID:</b>#if(ClientID){# #: ClientID # #}#</div> </div> </div> </div></script>1 Answer, 1 is accepted
0
Hello Joe,
When a huge amount of records is used, it is recommended to turn on the endless scrolling of the grid. This feature enables the Grid widget to display large amounts of data by appending additional pages of data on demand. Loading of new items happens when the scrollbar of the Grid reaches its end. When endless scrolling is enabled features like editing, filtering, grouping, and hierarchy are also supported. More information about this new feature is available in the following section of the documentation:
- https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/endless
- Live demo: https://demos.telerik.com/aspnet-mvc/grid/endless-scrolling-remote
Also, I would recommend checking the following blog article discussing How to get the gest grid performance:
Let me know if you have any questions
Regards,
Nikolay
Progress Telerik
Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Our thoughts here at Progress are with those affected by the outbreak.