如何从控制器更新 Kendo UI Grid 数据源？

Posted 2023-04-13

【中文标题】如何从控制器更新 Kendo UI Grid 数据源？

【英文标题】：How to update KendoUI Grids datasource from the controller?

【发布时间】：2021-08-03 10:16:02

【问题描述】：

我正在尝试使用以下代码更新网格的数据源。但我只想更新一个特定的列，我不想重新加载整个网格。我们至少有 100 条记录显示，但加载需要几秒钟。我们有这样的逻辑，即用户扫描条形码并将更新列。现在它会加载之后的所有内容。

是否可以只更新特定列而不加载整个网格？

$("#GridCreateShipment").data('kendoGrid').dataSource.read();


 @(html.Kendo().Grid<ProductionShipment>()
          .Name("GridCreateShipment")
          .AutoBind(true)
          .Filterable(filter => filter.Extra(false).Operators(op => op.ForString(str => str.Clear().Contains("Contains"))))
          .Columns(columns =>
          
         
              columns.Bound(p => p.OrderNo).Title("Order No.").Width(150).Filterable(false);
              columns.Bound(p => p.DetailNum).Title("Line No.").Groupable(false).Encoded(false).Filterable(false).Width(60);
              columns.Bound(p => p.ShipdateString).Title("Ship Date").Groupable(false).Encoded(false).Filterable(false).Width(100);
              columns.Bound(p => p.CustomerName).Title("Customer").Filterable(false).Width(150);
              columns.Bound(p => p.CustomerShipTo).Title("Customer Ship-To").Filterable(false).Width(150);
              columns.Bound(p => p.CustomerPO).Title("PO No.").Filterable(false).Width(90);
              columns.Bound(p => p.ItemId).Title("Item ID").Filterable(false).Width(200);
              columns.Bound(p => p.ItemDescription).Title("Description").Width(300).Filterable(false);
              columns.Bound(p => p.OrigQty).Title("Orig Qty").Filterable(false).Width(100);
              columns.Bound(p => p.QtyProduced).Title("Qty Produced").Filterable(false).Width(100);
              columns.Bound(p => p.QtyLoaded).Title("Qty Loaded").Filterable(false).Width(100);
              //columns.Bound(p => p.Routes).Filterable(false).Width(200);

          )
      
          .DataSource(dataSource => dataSource
              .Ajax()
              //BTG v.1.1.62 
              //Removed
              //.Sort(x=>x.Add("OrderNo").Ascending())
              .Read(read => read.Action("GridFillCreateShipment", "Production").Data("additionalData"))
              

          )

          ) 

【参考方案1】：

试试这样的：

首先您需要从控制器中获取作为对象的值，其次从当前网格中获取数据项/行，最后使用"dataItem.set()" 更改列的值（这会将您的网格的视图更新为好吧，而不是重新加载整个网格）

var data = //controller return;
var grid = $("#GridCreateShipment").data("kendoGrid");
var dataItem = grid.dataSource.get(data.ItemId);
dataItem.set("Customer","Devina");

您可以尝试此解决方案，但我仍然建议您在每次进行更改时更新所有记录，如果您不想每次都重新加载整个（100 条记录），您可以限制显示的记录在当前网格上（使用 pageSize 或 Pagination ），这只会加载该 pageSize 的记录数。

希望这能回答你的问题。