来自Html表的Kendo UI Grid - 更改事件不会触发

时间:2016-02-18 23:41:35

标签: kendo-ui kendo-grid

我有一个Kendo UI网格,其中dataSource是一个html表。 我试图解雇change:事件,但它不会触发。

这是一个简单的fiddle

它基于this

更改事件here

我绑定到#grid,如下所示:

$("#grid").kendoGrid({
  dataSource: {
    data: products,
    schema: {
      model: {
        fields: {
          ProductName: { type: "string" },
          UnitPrice: { type: "number" },
          UnitsInStock: { type: "number" },
          Discontinued: { type: "boolean" }
        }
      }
    },
    pageSize: 20
  },
  height: 550,
  scrollable: true,
  sortable: true,
  filterable: true,
  pageable: {
    input: true,
    numeric: false
  },
  columns: [
    "ProductName",
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px"  },
    { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
    { field: "Discontinued", width: "130px" }
  ]
});

var grid = $("#grid").data('kendoGrid');
grid.bind("change", function (e) {
    alert('CHANGE EVENT...') 
});


Perhaps it's not possible where the DataSource is an Html table. I'm not certain of this.

Thank you in advance...
Bob

1 个答案:

答案 0 :(得分:1)

问题不在于change事件......问题是网格没有收到任何selectable值。如果没有此配置值,即使change事件已正确注册,用户也无法选择任何单元格(或行)。

这是您的更新代码:

$("#grid").kendoGrid({
  dataSource: {
    data: products,
    schema: {
      model: {
        fields: {
          ProductName: { type: "string" },
          UnitPrice: { type: "number" },
          UnitsInStock: { type: "number" },
          Discontinued: { type: "boolean" }
        }
      }
    },
    pageSize: 20
  },
  height: 550,
  scrollable: true,
  sortable: true,
  filterable: true,
  selectable: "multiple cell",  //<--- Just add this line
  pageable: {
    input: true,
    numeric: false
  },
  columns: [
    "ProductName",
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px"  },
    { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
    { field: "Discontinued", width: "130px" }
  ]
});



var grid = $("#grid").data('kendoGrid');
grid.bind("change", function (e) {
    alert('CHANGE EVENT...') 
});

您也可以在this jsfiddle示例中尝试。

这是可选文档的link