Lưới Kendo: Vấn đề hiệu suất chậm

Question

Sự cố với hiệu suất chậm trong lưới Kendo, khi cố gắng tải hơn 1000 bản ghi, lưới sẽ mất khoảng 8 giây để tải. Tôi có thể thấy bộ điều khiển trả về dữ liệu json trong 3 giây và sau đó kendo lưới mất thời gian để cư trú.

Tôi có một PageSize 500 bản ghi và sử dụng DataSourceRequest, vì vậy dữ liệu cho mỗi trang sẽ chỉ được trả về từ bộ điều khiển. Nhưng vẫn không có niềm vui.

Bất kỳ ai cũng có thể tư vấn cho tôi cách tôi có thể cải thiện hiệu suất lưới.

Hãy tìm mã của tôi dưới đây

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

Enable UI ảo trên mạng lưới của bạn.

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

Nếu điều này không hiệu quả, tôi khuyên bạn nên triển khai phân trang bên máy chủ.

Answer 2

Chúng tôi cần xem xét mã điều khiển/hành động mà bạn có.

Đôi khi phụ thuộc vào vùng chứa mà bạn trả lại dữ liệu của mình, để có hiệu suất tốt nhất cho lưới kendo, bạn cần sử dụng vùng chứa IQueryable và chạy hàm ToDataSourceResult của bạn đối với vùng chứa này.

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

EDIT: cũng tắt ServerOperation của bạn (true) tùy chọn