Kendo Grid-動態匯總頁腳模板值

Question

我正在建立一個需要在頁腳中有一個總和的網格，但是內置的總和不能完全滿足我的需求。

例如，假設我正在構建一個包含我所銷售產品列表的網格。 我還有一個字段顯示“有資格享受折扣”。 我只想顯示產品價格的總和，但只顯示有折扣的產品。

理想情況下，我希望能夠傳遞如下功能，但我不認為Kendo網格支持該功能。

function(seed, model){
  if(model.EligibleForDiscount === true){
      return seed.Price + model.Price;
  }

  return seed.Price;
}

還必須在更新網格時自動刷新它。

通過手動處理網格上的事件並使用jQuery來更新頁腳模板的唯一方法是嗎？

Answer 1

請嘗試以下示例：

$("#SearchDetails").kendoGrid({
        scrollable: true,
        resizable: true,
        sortable: true,
        pageable: false,
        navigatable: true,
        filterable: false,
        groupable: true,
        selectable: "row",
        schema: {
            fields: {
                Duration: { type: "number" }
            }                      
        },
        columns: [
                { title: ' Name', field: 'CustName'},
                { title: ' Event Name', field: 'ServiceName'},
                { title: 'Resource Name', field: 'ResourceName', footerTemplate: '<span style=\'float:right;\'>Total</span>' },
                { title: 'Duration(Min)', field: 'Duration', template: '<span style=\'float:right;\'>#=Duration#</span>', aggregates: 'sum', footerTemplate: '<span id=\'footerPlaceholder\' style=\'float:right;font-weight: bold;\'>#=calc(sum)#</span>' },
                { title: 'Total Amount (' + currencySymbol + ')', field: 'TotalAmount', template: '<span style=\'float:right;\'>#=TotalAmount#</span>', aggregates: 'sum', footerTemplate: '<span style=\'float:right;font-weight: bold;\'>#=kendo.toString(sum,\'n\')#</span>' }
        ],
        dataSource: {
            data: viewModel.AppintDetails(),
            aggregate: [{ field: 'Duration', aggregate: 'sum', format: 'n' }, { field: 'TotalAmount', aggregate: 'sum', format: 'n' }]
        }
    });

在此之下，我們在html部分中創建了一個函數

<script type="text/javascript">
    function calc(val) {
        var hour = Math.floor(val / 60);
        var min = val % 60;
        val = hour + ":" + min + " hrs";
        return val;
    }
</script>

我只是用於以正確的日期格式顯示持續時間總計。此代碼對我有用...在網格下方顯示此...詳細信息

Answer 2

不幸的是，Kendo DataSource並沒有提供添加自定義聚合函數的方法，但是您可以通過使用自定義列footerTemplate來實現此footerTemplate例如：

var gridDataSource = new kendo.data.DataSource({...});

window.calculatePriceAggregate = function () {
    var data = gridDataSource.data();
    var total = 0;
    for(var i = 0; i < data.length; i++) {
        if (data[i].EligibleForDiscount === true) {
            total += data[i].Price;
        }
    }
    return total;
};

$("#grid").kendoGrid({
    data: gridDataSource,
    ...
    columns: [
        {
            field: 'Price',
            footerTemplate: '#=window.calculatePriceAggregate()#'
        }

    ]
});

Answer 3

否則使用像這樣的代碼...

 $("#grid").kendoGrid({

        scrollable: true,
        sortable: true,
        pageable: true,
        navigatable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    startswith: "Starts with",
                    eq: "Is equal to",
                    neq: "Is not equal to"
                }
            }
        },
        dataSource: {
            data: viewModel.UserWithoutGUID(),
        },
        groupable: false,
        selectable: "row",
        columns: [
               { title: "ID", field: "ResourceID", template: '<span>#= ResourceID #</span> <input type="hidden" value="#= ResourceID #"/>', width: 40 },
               { title: "Photo", filterable: false, field: "Image", template: '<span class="image"><img id="#=ResourceID #" height="50" width="50" src="#=Image#" onerror="#=LoadDefaultImage()#"/></span>', width: 40 },
               { title: "Name", field: "Name", width: 100 },
               { title: "Email", field: "Email", width: 100 },
               { title: "Mobile", field: "Mobile", width: 100 }
        ]

    });

LoadDefaultImage = function () {
    return "null";
}

我在這里通過調用此函數通過模板綁定加載圖像。

Answer 4

您好，我遲到了，但是如果可以幫助某人。

我曾經遇到過同樣的問題，所以我實現了一個解決方案，可以幫助您在groupFooterTemplate中使用自定義聚合函數。

鏈接到這里的項目

 function myAggregate(data){ // Data here is a list of data by group (brilliant right! :-) ) // Do anything here and return result string } var grid = $('#grid').kendoGrid({ ... columns: [ { field: '', title: '', groupFooterTemplate: myAggregate ] ... }); 

 <!DOCTYPE html> <html> <head> <!-- YOUR CSS HERE --> </head> <body> ... <div id="#grid"></div> ... <script>// jQuery here </script> <script>// kendo.all.min.js here </script> <script src="kendo.aggregate.helper.js"></script> </body> </html>