Question

我有一个Telerik UI网格我正在使用，而且我无法通过Checkbox列使其正常运行。

我想要的是将它绑定到布尔数据集中的字段。我想用复选框编辑此项目。每当选中或取消选中复选框时，我都想对该行进行一些数学运算。

我在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事件。

此外，默认情况下，kendo网格在编辑模式下不是处于显示模式的MVVM。如果查看数据绑定事件，则会使您的行甚至处于视图模式mvvm。

这是显示它的Dojo。

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>

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

1 个答案: