减去剑道网格中的两个字段

Question

我正在使用剑道网格，现在我想通过减去其他两个字段来显示剑道网格​​中的第三列。这在剑道网格中是否可能。例如：我想显示字段

“Allocated”=“TotalAmount-TotalDepriciated”

代码：

  $("#grid").kendoGrid({
        dataSource: DataSource,
        autoBind: false,
        scrollable: false,
        sortable: {
            allowUnsort: false
        },
        filterable: { mode: "row", style: "max-width:100px;" },
        groupable: true,
        pageable: {
            refresh: true,
            buttonCount: 5,
            pageSizes: GlobalPagingDDL
        },
        //rowTemplate: kendo.template($("#template").html()),
        dataBound: gridDataBound,

        columns:
            [
            //field: "Name", title: "Licensee", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } }, template: "<a href='javascript:void(0)' onclick='RedirectToOrgDetail(&quot;#:LicenseeId#&quot; , &quot;#:PublicName#&quot; )' >#:LicenseeName# </a>" },
            { field: "AgreementName", title: "Agreement Name", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
            {
                field: "Count", title: "Related Agreement", width: 150,
                filterable: { cell: { showOperators: true, suggestionOperator: "contains" } }
            },
            {
                field: "Status", title: "Status", width: 150, filterable: {
                    cell: {
                        template: function (args) {

                            args.element.kendoDropDownList({
                                dataSource: new kendo.data.DataSource({
                                    data:
                                    [
                                        { Status: "Approved" },
                                        { Status: "Pending" },

                                    ]
                                }),
                                dataTextField: "Status",
                                optionLabel: "All",
                                dataValueField: "Status",
                                valuePrimitive: true
                            });
                        }, showOperators: false, suggestionOperator: "contains"
                    }
                }
            },
            {
                field: "Type", title: "Type", width: 150, filterable: {
                    cell: {
                        template: function (args) {
                            args.element.kendoDropDownList({
                                dataSource: new kendo.data.DataSource({
                                    data:
                                    [
                                        { Type: "4" },
                                        { Type: "3" },
                                        { Type: "2" },
                                        { : "1" }
                                    ]
                                }),
                                dataTextField: "Type",
                                optionLabel: "All",
                                dataValueField: "Type",
                                valuePrimitive: true
                            });
                        }, showOperators: false, suggestionOperator: "contains"
                    }
                }
            },





            { field: "StartDate", title: "All Periods Start Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
            { field: "EndDate", title: "All Periods End Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
            { field: "TotalAmount", title: "Invoiced", format: "{0:c2}", footerTemplate: "$ #= sum # ", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
            { field: "TotalDepriciated", title: "Allocated", format: "{0:c2}", width: 200, footerTemplate: "$ #= sum # " },
            { field: "Allocated", title: "Balance", format: "{0:c2}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
            //{ field: "LastUpdatedDate", title: "Last Updated Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } }
            ]
    });

Answer 1

此代码对我有用。希望对你有帮助

{ field: "Allocated", title: "Allocated",
  template: '<div>#= TotalAmount-TotalDepriciated#</div>'           
}

我也在尝试创建一个 footerTemplate 来显示此结果的总和，但我不明白目前如何实现这一目标

Answer 2

请尝试以下代码 sn-p。

以下代码通过减去其他两个字段在剑道网格中添加第三列

Allocated: function () {
      return this.TotalAmount - this.TotalDepriciated;
 },
.....
.....
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },

完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="grid">
    </div>
    <script>


        var products = [{
            ProductID: 1,
            ProductName: "Chai",
            TotalAmount: 100,
            TotalDepriciated: 10,
        }, {
            ProductID: 2,
            ProductName: "Chang",
            TotalAmount: 100,
            TotalDepriciated: 10,
        }, {
            ProductID: 3,
            ProductName: "Aniseed Syrup",
            TotalAmount: 100,
            TotalDepriciated: 10,
        }, {
            ProductID: 4,
            ProductName: "Chef Anton's Cajun Seasoning",
            TotalAmount: 100,
            TotalDepriciated: 10,
        }, {
            ProductID: 5,
            ProductName: "Chef Anton's Gumbo Mix",
            TotalAmount: 100,
            TotalDepriciated: 30,
        }];

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: {
                                    type: "string"
                                },
                                TotalAmount: {
                                    type: "number"
                                },
                                TotalDepriciated: {
                                    type: "number"
                                }
                            },
                            Allocated: function () {
                                return this.TotalAmount - this.TotalDepriciated;
                            },
                        }
                    },
                    aggregate: [{ field: "TotalAmount", aggregate: "sum" },
                                { field: "TotalDepriciated", aggregate: "sum" }],
                    pageSize: 10
                },
                sortable: true,
                dataBound: function (e) {
                    var sumTotalAmount = parseFloat($("#sumTotalAmount").html());
                    var sumTotalDepriciated = parseFloat($("#sumTotalDepriciated").html());
                    $("#sumAllocated").html(sumTotalAmount - sumTotalDepriciated);
                },
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "ProductID", title: "ProductID" },
                    { field: "ProductName", title: "ProductName" },
                    { field: "TotalAmount", title: "TotalAmount", aggregates: ["sum"], footerTemplate: "<label id='sumTotalAmount'> #=sum# </label>" },
                    { field: "TotalDepriciated", title: "TotalDepriciated", aggregates: ["sum"], footerTemplate: "<label id='sumTotalDepriciated'> #=sum# </label>" },
                    { field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
                    { command: ["edit", "destroy"], title: "&nbsp;" }

                ],
                editable: "inline"
            });
        });
    </script>
</body>
</html>

如果有任何问题，请告诉我。