Kendo ui 在剑道网格中减去两个字段_Kendo Ui_Telerik_Kendo Grid_Kendo Asp.net Mvc_Telerik Grid

Kendo ui 在剑道网格中减去两个字段

kendo-ui telerik

Kendo ui 在剑道网格中减去两个字段,kendo-ui,telerik,kendo-grid,kendo-asp.net-mvc,telerik-grid,Kendo Ui,Telerik,Kendo Grid,Kendo Asp.net Mvc,Telerik Grid,我正在使用剑道网格，现在我想通过减去另外两个字段来显示剑道网格中的第三列。这在剑道格网中是可能的。例如：我想向大家展示这一领域 “已分配”=“TotalAmount TotalDeprivated” 代码： $（“#网格”）.kendoGrid({ 数据源：数据源，自动绑定：错误，可滚动：false，可排序：{ allowUnsort:错误 }, 可筛选：{模式：“行”，样式：“最大宽度：100px；”}，分组：对，可分页：{ 刷新：是的，按钮计数：5，页面大小：GlobalPag

我正在使用剑道网格，现在我想通过减去另外两个字段来显示剑道网格中的第三列。这在剑道格网中是可能的。例如：我想向大家展示这一领域

“已分配”=“TotalAmount TotalDeprivated”

代码：

$（“#网格”）.kendoGrid({
数据源：数据源，
自动绑定：错误，
可滚动：false，
可排序：{
allowUnsort:错误
},
可筛选：{模式：“行”，样式：“最大宽度：100px；”}，
分组：对，
可分页：{
刷新：是的，
按钮计数：5，
页面大小：GlobalPagingDDL
},
//rowTemplate:kendo.template（$（“#template”）.html（）），
数据绑定：gridDataBound，
柱：
[
//字段：“名称”，标题：“被许可方”，宽度：200，可过滤：{cell:{showOperators:false，suggestionOperator:“包含”}，模板：“}，
{字段：“AgreementName”，标题：“AgreementName”，宽度：200，可筛选：{单元格：{showOperators:false，suggestionOperator:“contains”}}，
{
字段：“计数”，标题：“相关协议”，宽度：150，
可筛选：{cell:{showOperators:true，suggestionOperator:“包含”}
},
{
字段：“状态”，标题：“状态”，宽度：150，可过滤：{
单元格：{
模板：函数（args）{
args.element.kendoDropDownList({
数据源：新建kendo.data.dataSource({
数据：
[
{状态：“已批准”}，
{状态：“待定”}，
]
}),
dataTextField:“状态”，
选项标签：“全部”，
dataValueField:“状态”，
valuePrimitive:对
});
}，showOperators:false，suggestionOperator:“包含”
}
}
},
{
字段：“类型”，标题：“类型”，宽度：150，可过滤：{
单元格：{
模板：函数（args）{
args.element.kendoDropDownList({
数据源：新建kendo.data.dataSource({
数据：
[
{类型：“4”}，
{类型：“3”}，
{Type:“2”}，
{ : "1" }
]
}),
dataTextField:“类型”，
选项标签：“全部”，
dataValueField:“类型”，
valuePrimitive:对
});
}，showOperators:false，suggestionOperator:“包含”
}
}
},
{字段：“开始日期”，标题：“所有期间开始日期”，宽度：150，格式：{0:MM/dd/yyyy}，可筛选：{单元格：{showOperators:true}}，
{字段：“结束日期”，标题：“所有期间结束日期”，宽度：150，格式：{0:MM/dd/yyyy}，可筛选：{单元格：{showOperators:true}}，
{字段：“TotalAmount”，标题：“Invocated”，格式：“{0:c2}”，页脚模板：“$#=sum#”，宽度：200，可过滤：{单元格：{showOperators:false，suggestionOperator:“contains”}}，
{字段：“TotalDepricated”，标题：“Allocated”，格式：{0:c2}，宽度：200，页脚模板：“$#=sum#”}，
{字段：“已分配”，标题：“平衡”，格式：{0:c2}，可筛选：{cell:{showOperators:false，suggestionOperator:“包含”}}}，
//{字段：“LastUpdateDate”，标题：“上次更新日期”，宽度：150，格式：{0:MM/dd/yyyy}，可筛选：{单元格：{showOperators:true}}
]
});

请尝试以下代码片段

下面的代码通过减去另外两个字段在剑道网格中添加第三列

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

已分配：函数（）{
返回this.TotalAmount-this.totalDeprivated；
},
.....
.....
{字段：“已分配”，标题：“已分配”，模板：“#=已分配（）#”，页脚模板：“}，

完整代码：

<!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>


贾耶什·戈亚尼
var乘积=[{
产品编号：1，
产品名称：“柴”，
总数：100，
总定价：10，
}, {
产品编号：2，
产品名称：“Chang”，
总数：100，
总定价：10，
}, {
产品编号：3，
产品名称：“八角糖浆”，
总数：100，
总定价：10，
}, {
产品编号：4，
产品名称：“安东厨师卡琼调味品”，
总数：100，
总定价：10，
}, {
产品编号:5,，
产品名称：“厨师安东的秋葵混合物”，
总数：100，
总定价：30，
}];
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
数据：产品，
模式：{
型号：{
id:“产品id”，
字段：{
产品名称：{
类型：“字符串”
},
总额：{
类型：“nu
<!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>

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