Griglia di Kendo: problema di prestazioni lente

Question

Il problema è con le prestazioni lente nella griglia di Kendo, quando si tenta di caricare più di 1000 record la griglia impiega circa 8 secondi per caricarsi. Vedo che il controller restituisce i dati JSON in 3 secondi e quindi la griglia di kendo richiede tempo per essere completata.

Ho un PageSize di 500 record e utilizzato DataSourceRequest, quindi i dati per ciascuna pagina verranno restituiti solo dal controller. Ma ancora nessuna gioia.

Qualcuno può consigliarmi come migliorare le prestazioni della rete.

Si prega di trovare il mio codice qui sotto

@(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

Attiva la virtualizzazione UI sulla griglia.

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

Se ciò non risulta utile, suggerirei di implementare il paging lato server.

Answer 2

Abbiamo bisogno di dare un'occhiata al controller/codice di azione che avete.

Dipende dal contenitore in cui vengono restituiti i dati, dalla mia esperienza per ottenere le prestazioni migliori per la griglia di kendo è necessario utilizzare il contenitore IQueryable ed eseguire la funzione ToDataSourceResult su questo contenitore.

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

EDIT: anche spegnere il ServerOperation (vero) opzione