如何通过网格刷新读取和更新剑道网格页脚模板值答案

【问题标题】：How to read and update the kendo grid footer template value with grid refresh如何通过网格刷新读取和更新剑道网格页脚模板值
【发布时间】：2021-01-06 17:50:48
【问题描述】：

我遇到了与以下 SO 问题 here 中解释的问题类似的问题。

这个问题只回答了一半，并且没有说明如果页脚模板包含任何特殊的模板定义，如何更新它。

Kendo Grid FooterTemplate 定义如下：

<% Html.Kendo().Grid<_3ECProject.Models.TransactionHistoryModel>()
  .Name("creditnoteinfogrid")
  .Columns(columns =>
  {
    columns.Bound(e => e.Amount).Format("{0:#,###.00}")
       .ClientFooterTemplate("<div style='float: right'>#: kendo.toString(sum, '\\#,\\#\\#\\#.00') #</div>")
       .FooterHtmlAttributes(new {id = "total-amount" });
  }
  .Events(events => events.Save("onGridCellSave"))
  .DataSource(dataSource => dataSource.Ajax().Batch(true).ServerOperation(false)
    .Aggregates(aggregates =>{
      aggregates.Add(p => p.Amount).Sum();
    })
  )
%>

如何更新定义了 customFooterTemplate() 的页脚模板。

使用 Kendo-MVC - 2020.3.915

【问题讨论】：

标签： asp.net-mvc-4 razor kendo-ui kendo-grid footer

【解决方案1】：

我发现的一种方法是用新的 innerHTML 替换页脚模板 DOM 元素，同时保持原来的 ClientFooterTemplate() 不变。

function onGridCellSave(e) {
  e.model.Amount = e.values.Amount;

  var grid = $('#grid').data('kendoGrid');
  var griddata = grid.dataSource.data();
  var totalAmount = 0;
  griddata.forEach(function (item, index) {
    totalAmount = totalAmount + item.Amount;
  });

  console.log(totalAmount);

  //This is the way I update the footer template cell by using the id property and set it with the same HTML set in the .ClientFooterTemplate()
  document.getElementById("total-amount").innerHTML = "<div style='float: right'>" + kendo.toString(totalAmount, '#,###.00') + "</div>";
}

【讨论】：