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

Question

我在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（）在实际更新请求之前执行。

Answer 1

如果需要在网格脚注中使用聚合和，则需要更新datasource并再次获取，以下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();
  });
}

Answer 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 });

Answer 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); 
    }
}

如果您执行此操作并删除/添加适当的格式，则每次编辑相应单元格时，它都应更新汇总。