CODEWITHSUNDEEP
jqueryasp.net-mvc-4kendo-uikendo-grid
user1870358
user1870358

Reputation: 225

Kendo grid : Slow performance issue

The issue is with slow performance in Kendo grid, when trying to load 1000+ records the grid takes about 8 seconds to load. I can see the controller returns json data with in 3 seconds and then kendo grid takes time to populate.

I have a PageSize of 500 records and used DataSourceRequest, so the data for the each page will only be returned from the controller. But still no joy.

Can anyone please advice me how can I improve the grid performance.

Please find my code below 

 @(Html.Kendo().Grid<Model>()
.Name("KendoTestGrid")     
.Columns(columns =>
{

    columns.Bound(p => p.Column5)
          .Width("18%")             
          .ClientTemplate("#= formatResult(format(column5, '')) #")
          .EditorTemplateName("Column5")
          .ClientFooterTemplate("<span href='\\#'  id='total'>Total : </span>");             
    columns.Bound(p => p.Column6)
         .EditorTemplateName("Column6")
         .ClientTemplate("#= format(column6, '') #")                       
         .ClientFooterTemplate("<span href='\\#' id='spanfooter'></span>")             
         .Width("23%");
    columns.Bound(p => p.column7)             
         .ClientTemplate("<span href='\\#'  id='#=Id #'>#= format(Column7,'')#</span>")
         .ClientFooterTemplate("<span href='\\#'  id='spansum'></span>")
         .HtmlAttributes(new { Class = "number" })
         .Width("18%");
    columns.Bound(p => p.column8)
         .EditorTemplateName("column8")            
         .ClientFooterTemplate("Total:")
         .ClientFooterTemplate("<span href='\\#'  id='TotalSum1'></span>")           
         .Width("23%");      
})

.DataSource(dataSource => dataSource
    .Ajax()      
    .Batch(true)
    .ServerOperation(true)      
    .Read(read => read.Action("Action", "Controller").Data("getData"))
    .Create(c => c.Action("Action", "Controller").Data("getData2"))
    .Update(update => update.Action("Action", "Controller").Data("getData3"))
    .PageSize(500) .Events(x => x.DataBound("ongriddatabound")
    .Edit("ongridedit")
    .Change("ongridchange"))   
    .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))

    .Filterable()
    .Groupable()       
    .Sortable()
    .Scrollable()
    .Pageable()
    .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
    .Resizable(resize => resize.Columns(true))
    .AutoBind(false)
)

Upvotes: 9

Views: 17041

Answers (2)

Shadi
Shadi

Reputation: 2246

We need to have look at the controller/action code that you have.

It depends sometime on the container that you return your data in, from my experience to get the best performance for kendo grid you need to use the IQueryable container and run your ToDataSourceResult function against this container.

public ActionResult Action([DataSourceRequest] DataSourceRequest request, string ExtraParameters)
{
    DBContext db = new DBContext();
    IQueryable<Model> models = db.Models;
    return Json((models).ToDataSourceResult(request));
}

EDIT: also turn off your ServerOperation(true) option

Upvotes: 4

dcarson
dcarson

Reputation: 2853

Enable UI virtualization on your grid.

$(document).ready(function(){
      $("#grid").kendoGrid({
         scrollable: {
             virtual: true // <--- This
         }
      });
  });

If this doesn't help, I would suggest implementing server side paging.

Upvotes: 1

Related Questions