剑道网格：性能缓慢问题

Posted 2023-05-07

【中文标题】剑道网格：性能缓慢问题

【英文标题】：Kendo grid : Slow performance issue

【发布时间】：2013-07-04 20:43:15

【问题描述】：

问题在于 Kendo 网格中的性能较慢，当尝试加载 1000 多条记录时，网格大约需要 8 秒才能加载。我可以看到控制器在 3 秒内返回 json 数据，然后剑道网格需要时间来填充。

我有一个 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)
)

【问题讨论】：

您能否将您的网格代码添加到原始问题中。我创建了一个包含 1200 个元素且页面大小为 500 的网格，它在我的浏览器/笔记本电脑中不需要任何内容​​。你可以在这里试试jsfiddle.net/OnaBai/27g3s。您是否使用复杂的模板或类似的东西？

请包括用于制作网格的代码，以及您可能使用过的任何自定义行或编辑模板。

我在我的专栏中使用 Clienttemplate 和 Editortemplate。 EditorTemplate 在其中两列中有数字文本框。

【参考方案1】：

我们需要查看您拥有的控制器/操作代码。

这有时取决于您返回数据的容器，根据我的经验，要获得剑道网格的最佳性能，您需要使用 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(true) 选项

【讨论】：

.ServerOperation(false) 是我需要的。

【参考方案2】：

在您的网格上启用 UI 虚拟化。

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

如果这没有帮助，我建议实现服务器端分页。

【讨论】：

如果我使用ClientTemplate和EditTemplate，网格会变慢吗？

您需要发布一些代码，正如其他评论发布者所要求的那样。

请注意，虚拟滚动与Telerik的分组不兼容