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

Answer 1

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