Question

我目前有一个包含三列的网格：qty，price和totalPrice。我所做的只是使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");

Answer 1

您可以在没有模板的情况下获得相同的结果

＆＃13;

$("#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();
  }
});

＆＃13;

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

＆＃13;

Answer 2

您可以添加eventhandler

save：function（e）{e.sender.refresh（）; }

刷新网格。

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

2 个答案: