Kendo UI Grid - 根据另一个 incell 编辑更新总列？答案

【问题标题】：Kendo UI Grid - update total column based on incell edit of another?Kendo UI Grid - 根据另一个 incell 编辑更新总列？
【发布时间】：2014-12-24 23:46:46
【问题描述】：

我目前有一个包含三列的网格：数量、价格和总价格。我所做的只是使 qty 列可编辑。我想要的是当 qty 单元格更改为 totalPrice 列时自动更新（执行 qty * price）。我尝试将模板添加到 totalPrice 列，如下所示：

template: "#= qty * price #"

但这不起作用。

有人可以帮忙吗？

grid = $("#grid").kendoGrid({
                dataSource: dsDataSource,
                height: 500,
                editable: "incell",
                groupable: false,
                sortable: false,
                selectable: true,
                pageable: false,
                scrollable: true,
                navigatable: false,
                change: function(e){

                },
                columns: 
                [
                    {field: "qty",        editable: true,  title: "Qty",   width: "20px",  headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
                    {field: "price",      editable: false, title: "Price", width: "20px",  headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
                    {field: "totalPrice", editable: false, title: "Total", width: "20px",  headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" }, template: "#= qty * price#" }
                ]
            }).data("kendoGrid");

【问题讨论】：

你能提供一些代码来帮助你吗？

标签： kendo-ui kendo-grid

【解决方案1】：

不用模板也能达到同样的效果

$("#grid").kendoGrid({
  columns: [
    { field: "qty",editable: true,  title: "Qty",width: "20px" },
    { field: "price",editable: false, title: "Price", width: "20px" },
    { field: "totalPrice", editable: false, title: "Total", width: "20px" }
  ],
  dataSource: {
    data:[
      { id: 1, qty: 1, price: 30, totalPrice:30},
      { id: 2, qty: 2, price: 33, totalPrice:66}
    ],
    schema: {
      model: { id: "id" }
      
    }
  },
  editable: "incell",
  edit: function(e) {
      var price =e.container.find("input[name=price]").data("kendoNumericTextBox");
    
      var totalPrice =e.container.find("input[name=totalPrice]").data("kendoNumericTextBox");
    if(price != null || totalPrice != null)
      this.closeCell();
      
    
  },
  save: function(e) {
    if (e.values.qty != null) 
    e.model.totalPrice = e.values.qty * e.model.price;
    e.sender.refresh();
  }
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>

</body>
</html>

【讨论】：

【解决方案2】：

你可以添加事件处理程序

保存：function(e) { e.sender.refresh(); }

刷新网格。

【讨论】：