无法在 kendo 网格 MVC 中同时添加计算列

Question

我在我的应用程序中实现了 kendo 网格内联编辑。我的网格中有列百分比和百分比金额，它们是根据基本金额计算的。

我希望当用户更改百分比时，应该自动计算百分比金额。此外，当用户更改百分比金额时，应自动计算百分比。

我创建了这个 dojo 来展示实现。

下面是我目前使用的代码：

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

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>

<button onClick="reset()" class="k-button">Reset test data</button>
<div id="grid"></div>
<script>

function setTestData(){
    var testData = [
      {ID: 1, Value: "TEST1", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 2, Value: "TEST2", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 3, Value: "TEST3", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 4, Value: "TEST4", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50},
      {ID: 5, Value: "TEST5", BaseAmount: 500, IncreasePercentage: 10, IncreaseAmount: 50}  
    ];
    localStorage["grid_data"] = JSON.stringify(testData);
}

function reset(){
    setTestData();
    $("#grid").data("kendoGrid").dataSource.read();
}

$(document).ready(function () {

    if(localStorage["grid_data"] == undefined){
        setTestData();
    }

    var dataSource = new kendo.data.DataSource({
        transport: {
          create: function(options){
            var localData = JSON.parse(localStorage["grid_data"]);
            options.data.ID = localData[localData.length-1].ID + 1;
            localData.push(options.data);
            localStorage["grid_data"] = JSON.stringify(localData);
            options.success(options.data);
          },
          read: function(options){
              var localData = JSON.parse(localStorage["grid_data"]);
              options.success(localData);
          },
          update: function(options){
            var localData = JSON.parse(localStorage["grid_data"]);

            for(var i=0; i<localData.length; i++){
              if(localData[i].ID == options.data.ID){
                localData[i].Value = options.data.Value;
              }
            }
            localStorage["grid_data"] = JSON.stringify(localData);
            options.success(options.data);
          },
          destroy: function(options){
            var localData = JSON.parse(localStorage["grid_data"]);
            for(var i=0; i<localData.length; i++){
                if(localData[i].ID === options.data.ID){
                    localData.splice(i,1);
                    break;
                }
            }
            localStorage["grid_data"] = JSON.stringify(localData);
            options.success(localData);
          },
        },
        schema: {
          model: {
            id: "ID",
            fields: {
              ID: { type: "number", editable: false },
              Value: { type: "string", editable: false },
              BaseAmount:{type: "number" , editable: false},
              IncreasePercentage:{type: "number"},
              IncreaseAmount:{type: "number"}
            }}
        },
        pageSize: 20
    });

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 500,
        toolbar: ["create", "save", "cancel"],
        columns: [
          { field: "ID", width: "100px" },
          { field: "Value", width: "100px"},
          { field: "BaseAmount", width: "150px"},
          { field: "IncreasePercentage", width: "150px"},
          { field: "IncreaseAmount", width: "150px"},
          { command:  ["edit"], width: "150px" }
        ],
        editable: "inline",
    }).data("kendoGrid");
});
</script>
</body>
</html>

预期行为：

基础金额=500，百分比（用户输入）=10，百分比金额（自动计算）=50
基础金额=500，百分比（自动计算）=10，百分比金额（用户输入）=50

我正在使用 Kendo MVC 网格，但我无法为其创建 dojo，所以我提供 jquery API。有没有办法在 kendo 网格中添加两个同时计算的列？

Answer 1

您可以使用 change 事件监听数据源的变化：

var dataSource = new kendo.data.DataSource({
  change: function(e) {
  // only triggered when the item changes
  if (e.action !== 'itemchange') {
    return;
  }

  if (e.field === 'IncreasePercentage') {
    $.each(e.items, function(i, item) {
      // calling item.set also triggers the change event, so we need to prevent infinite loops
      var newIncreaseValue = item.BaseAmount * item.IncreasePercentage/100;
      if (item.IncreaseAmount !== newIncreaseValue) {
        item.set('IncreaseAmount', newIncreaseValue);
      }
    });
  } else if (e.field === 'IncreaseAmount') {
    $.each(e.items, function(i, item) {
      // calling item.set also triggers the change event, so we need to prevent infinite loops
      var newIncreaseValue = 100 * item.IncreaseAmount / item.BaseAmount;
      if (item.IncreasePercentage !== newIncreaseValue) {
        item.set('IncreasePercentage', newIncreaseValue);
      }
    });
  }
});

您可以根据需要使用各种事件；在数据源本身（如我的示例）或网格本身上。

数据源上的事件：https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events
网格上的事件：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events

无法在 kendo 网格 MVC 中同时添加计算列

Unable to add simultaneous calculated column in kendo grid MVC

dojo

kendo-ui

kendo-grid

kendo-asp.net-mvc