在编辑时刷新 Kendo UI MVC 网格的 ClientFooterTemplate答案

【问题标题】：Refresh the ClientFooterTemplate of Kendo UI MVC grid on edit在编辑时刷新 Kendo UI MVC 网格的 ClientFooterTemplate
【发布时间】：2014-02-25 14:47:38
【问题描述】：

我在 ajax 模式下使用 Kendo UI 网格，并有一个 ClientFooterTemplate 与一列的总和。这一切都很好，但是如果我创建/更新或删除记录，则 ClientFooterTemplate 不会更新并且总和值保持不变。

如何更新 ClientFooterTemplate 以便在创建/更新或删除后总和值是最新的？

这是我迄今为止尝试过的：

.Events(events =>
{
    events.SaveChanges("SaveChanges");
    events.Remove("Remove");
    events.Save("SaveChanges");
})
<script>
    function SaveChanges(e) {
        Reload(e.sender);
    }
    function Remove(e) {
        Reload(e.sender);
    }
    function Reload(obj) {
        obj.dataSource.read();
    }
</script>

obj.dataSource.read() 在实际更新请求之前执行。

【问题讨论】：

Idk 保存和保存更改之间的区别，但也许这两个事件发生冲突。尝试删除尽可能多的变量。因此，不要在 SaveChanges 之后调用 Reload，只需进行读取即可。也许尝试不同的事件关闭或改变可能

标签： c# asp.net kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

您需要更新 datasource 并再次获取，如果您在您的 gird 页脚中使用聚合总和，则以下 JavaScript 将在您每次创建/更新任何行时更新您的页脚总和。

.DataSource(dataSource => dataSource
  .Ajax()
  .Aggregates(aggregates =>
  {
    aggregates.Add(p => p.WorkOrderDetailsQuantity).Sum();
    aggregates.Add(p => p.Total).Sum();                         
  })
.Events(e=>e.Edit("onEdit").Save("onSave"))

function onSave(e)
{
  //update the aggregate columns
  var dataSource = this.dataSource;
  e.model.one("change", function () {
    dataSource.one("change", function () {
      dataSource.aggregates().Total.sum;
    });
    dataSource.fetch();
  });
}

【讨论】：

【解决方案2】：

您可能需要对网格的数据源进行刷新。所以更新后你可以这样刷新...

 var grid = $("#ProposalGrid").data("kendoGrid");
             grid.dataSource.page(1) // or
             grid.dataSource.read() //if dataSource Read expects a paramater
             grid.dataSource.read( {paramNameAsDefinedInController : value });

【讨论】：

我确实尝试过这个，但是 Save 事件是在实际请求保存之前执行的。这是我尝试过的： .Events(events => { events.SaveChanges("SaveChanges"); events.Remove("Remove"); events.Save("SaveChanges"); }) 它首先执行 read()，然后执行实际的保存请求。

【解决方案3】：

如果您不想重新加载数据，您可以随时执行以下操作（有点 hacky...）：

首先，对 Save 事件和 SaveChanges 事件使用不同的函数，例如：

.Events(events => {
    events.Save("Save");
    events.SaveChanges("SaveChanges");
    events.Remove("Remove")
})

其次，定义JavaScript方法，例如：

function Save(e) {
    if (e.value.Gewgaw) { // replace 'Gewgaw' with your column name
        var footer = $('tr.k-footer-template'),
            idx = 3, // replace 3 with the column index you want to aggregate
            aggregate = $(footer).children('td')[idx]; 

        // I had to delay the stuff in this function to get it to load properly
        setTimeout(function () { 
            var sum = 0;

            $('tr[role=row][data-uid]').each(function(i, e) {
                var $cell = $($(e).children()[idx]);

                /* do any necessary manipulations before this 
                   if your cell is formatted */
                var cellAmount = parseFloat($cell.text()); 

                sum += cellAmount;
            });

            /* do any necessary formatting to sum before this 
               if your cell is formatted */
            $(aggregate).text(sum); 
        }, 50); 
    }
}

如果你这样做并删除/添加适当的格式，它应该在每次编辑相应的单元格时更新聚合。

【讨论】：