Kendo grid : Slow performance issue

Question

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)
)

Can you please add your grid code to the original question. I've created a grid with 1200 elements and page size of 500 it takes nothing in my browser / laptop. You can try it here jsfiddle.net/OnaBai/27g3s. Are you using complex templates or something like that? — OnaBai
Please include the code used to make the grid, and any custom row or edit templates you may have used. — CodingWithSpike
I use Clienttemplate and Editortemplate in my columns. EditorTemplate is having the numberic textbox in two of the columns. — user1870358

Shadi Shadi · Accepted Answer · 2014-02-26T04:16:40

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

Kendo grid : Slow performance issue

2 Answers