Telerik UI MVVM 网格与复选框行为不端

Question

我有一个正在使用的 Telerik UI 网格，但我无法让它在复选框列中完全正常运行。

我想要将它绑定到数据集中的布尔字段。我想用复选框编辑这个项目。只要选择或取消选中复选框，我想在行上执行一些数学。

我搜索了 Stackexchange，发现了一些有用的代码位，但不是 100%。 I've created a JSFiddle to demonstrate the odd behavior.

网格定义如下：

<script type="text/x-kendo-template" id="checkboxTemplate">
    <input type="checkbox" #=Discontinued ? checked="checked" : "" # class="chkbx" />
</script>

<div
    id="LineItemsGrid"
    data-role="grid"
    data-editable="true"
    data-bind="source: LineItems"
    style="height: 470px"
    data-navigatable="true"
    data-columns="[
    { 'field': 'Discontinued', 'title':'<center>Discontinued</center>', 'width': 95, 'template': kendo.template($('#checkboxTemplate').html()) },
    { 'field': 'ProductName', 'title':'<center>Product Name</center>', 'width': 90 },
    { 'field': 'UnitPrice', 'title':'<center>Unit Price</center>', 'width': 90 },
        { 'field': 'UnitsInStock', 'title':'<center>Units In Stock</center>', 'width': 90 },
        { 'field': 'TotalInventory', 'title':'<center>Total Inventory</center>', 'width': 90 }
    ]">
</div>

没什么太花哨的。处理复选框的javascript在这里：

$(document).on('change', 'input:checkbox', function (e) {

    var grid = $("#LineItemsGrid").data("kendoGrid");
    var row = $(this).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var colIdx = $("td", row).index(this);

    var checkval = $(this).prop("checked");

    var items = LineItemsSource.data();

    // set data - this causes the move to (0,0)
    items[rowIdx].set("Discontinued", checkval);
    if(checkval)
    {
        var total =  items[rowIdx].get("UnitPrice") * items[rowIdx].get("UnitsInStock");
        items[rowIdx].set("TotalInventory",total);
    }
    else
    {
        items[rowIdx].set("TotalInventory",0);
    }
})

如果您单击复选框，当您 .set() 将值设置为复选框时，它会将插入符号移动到 (0,0)。当您单击复选框旁边的单元格时，它会将复选框向左移动一点并且不会选中它。如果您此时单击它，它会进行编辑并且不会移动到 (0,0)。

我绝对肯定有一种更优雅的方法可以做到这一点，但我没有找到任何线索。

Answer 1

您的代码在 jsfiddle 中调试起来有点困难。

但我为你做了这个，希望它可以帮助你：

您可以使用数据源和 MVVM 的更改事件，而不是尝试处理 JQuery 事件。

默认情况下，剑道网格在显示模式下不是 MVVM，只是在编辑模式下。 如果您查看数据绑定事件，这会使您的行即使在视图模式 mvvm 下。

这是显示它的道场。

https://dojo.telerik.com/AYEsUSiz/4

这里是代码

<div id="grid"></div>
  <script type="text/x-kendo-template" id="checkboxTemplate">
      <input type="checkbox" data-bind="checked: Discontinued" class="chkbx" />
  </script>
  <script>
        $('#grid').kendoGrid({
        dataBound: function(e) {
            let visibleModels = e.sender.dataSource.view();
            var items = e.sender.items();
            for(var i = 0 ; i < items.length; i++) {
                kendo.bind(items[i], visibleModels[i]);
            }
        },
        editable: true,
        navigatable: true,
        dataSource: {
          change: function(e) {
                console.log(e);
                if (e.action == "itemchange" && e.field == 'Discontinued') {
                var model = e.items[0];

                if(model.get('Discontinued'))
                {
                  var total =  model.get("UnitPrice") * model.get("UnitsInStock");
                  model.set("TotalInventory",total);
                }
                else
                {
                  model.set("TotalInventory",0);
                }
              }
          },
            transport: {
            read: function(options) {
                options.success(products); 
            }
          }
        },
        columns: [
          { 'field': 'Discontinued', 'title':'<center>Discontinued</center>', 'width': 95, 'template': kendo.template($('#checkboxTemplate').html()) },
          { 'field': 'ProductName', 'title':'<center>Product Name</center>', 'width': 90 },
          { 'field': 'UnitPrice', 'title':'<center>Unit Price</center>', 'width': 90 },
          { 'field': 'UnitsInStock', 'title':'<center>Units In Stock</center>', 'width': 90 },
          { 'field': 'TotalInventory', 'title':'<center>Total Inventory</center>', 'width': 90 }
        ]
      });
  </script>   

---

如果您不设置该字段，则网格不会尝试将您的列转换为可编辑控件，它会以相同的方式做出反应并同时更改数据源中的模型。

https://dojo.telerik.com/AYEsUSiz/6

代码：

<div id="grid"></div>
  <script type="text/x-kendo-template" id="checkboxTemplate">
      <input type="checkbox" data-bind="checked: Discontinued" class="chkbx" />
  </script>
  <script>
        $('#grid').kendoGrid({
        dataBound: function(e) {
            let visibleModels = e.sender.dataSource.view();
            var items = e.sender.items();
            for(var i = 0 ; i < items.length; i++) {
                kendo.bind(items[i], visibleModels[i]);
            }
        },
        editable: true,
        navigatable: true,
        dataSource: {
          change: function(e) {
                console.log(e);
                if (e.action == "itemchange" && e.field == 'Discontinued') {
                var model = e.items[0];

                if(model.get('Discontinued'))
                {
                  var total =  model.get("UnitPrice") * model.get("UnitsInStock");
                  model.set("TotalInventory",total);
                }
                else
                {
                  model.set("TotalInventory",0);
                }
              }
          },
            transport: {
            read: function(options) {
                options.success(products); 
            }
          }
        },
        columns: [
          { 'title':'<center>Discontinued</center>', 'width': 95, 'template': kendo.template($('#checkboxTemplate').html()) },
          { 'field': 'ProductName', 'title':'<center>Product Name</center>', 'width': 90 },
          { 'field': 'UnitPrice', 'title':'<center>Unit Price</center>', 'width': 90 },
          { 'field': 'UnitsInStock', 'title':'<center>Units In Stock</center>', 'width': 90 },
          { 'field': 'TotalInventory', 'title':'<center>Total Inventory</center>', 'width': 90 }
        ]
      });
  </script>