2013-07-07 61 views
8

問題是在Kendo網格中性能緩慢,當試圖加載超過1000條記錄時,網格需要大約8秒的加載時間。我可以看到控制器在3秒內返回json數據,然後kendo網格需要時間來填充。劍道網格:緩慢的性能問題

我有500個記錄的PageSize並使用了DataSourceRequest,所以每個頁面的數據只會從控制器返回。但仍然沒有喜樂。

任何人都可以請教我如何提高網格性能。

請在下面找到

@(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) 
) 
+1

能否請您添加電網規範原來的問題。我創建了一個包含1200個元素的網格,頁面大小爲500,在我的瀏覽器/筆記本電腦中不需要任何東西。你可以在這裏試試http://jsfiddle.net/OnaBai/27g3s/。你使用複雜的模板或類似的東西? – OnaBai

+1

請包括用於製作網格的代碼以及您可能使用的任何自定義行或編輯模板。 – CodingWithSpike

+0

我在我的列中使用Clienttemplate和Editortemplate。 EditorTemplate在兩列中有數字文本框。 – user1870358

回答

1

我的代碼在網格上啓用UI虛擬化。

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

如果這沒有幫助,我會建議實施服務器端分頁。

+0

網格是否會變慢如果我使用ClientTemplate和EditTemplate。 – user1870358

+0

您需要張貼一些代碼,因爲其他評論海報要求。 – dcarson

+0

請注意,虛擬滾動與每個[Telerik]的分組不兼容(https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#limitations-for-virtual-scrolling) – sonyisda1

3

我們需要查看您擁有的控制器/操作代碼。

這取決於你在容器中返回你的數據,根據我的經驗來獲得最佳的劍道網格性能,你需要使用IQueryable容器並對這個容器運行ToDataSourceResult函數。

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

編輯:也關閉ServerOperation(真)選項

+0

.ServerOperation (假)是我需要的。 –