kendoGrid Event事件

1.beforeEdit事件

在编辑器创建之前，点击编辑或创建数据时触发，可以用于自定义逻辑，阻止编辑。

参数：

• e.model：选中当前要编辑的数据，可以使用isNew()方法来检查数据项是新建还是编辑
• e.sender：当前kendoGrid实例

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          "id": { type: "number" }
        }
      }
    }
  },
  editable: "popup",
  toolbar:["create"],
  beforeEdit: function(e) {
    //console.log('sneder',e.sender);
    //console.log('model',e.model);
    if (!e.model.isNew()) {    //判断是否为新增
      e.preventDefault();
    }
  }
});
</script>

2.edit事件

用户编辑或创建数据时触发。

参数：

• e.model：选中当前要编辑的数据，可以使用isNew()方法来检查数据项是新建还是编辑。
• e.sender：当前kendoGrid实例。
• e.container：编辑容器的JQ对象，根据编辑模式的不同，容器也是不同的。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          "id": { type: "number" }
        }
      }
    }
  },
  editable: "popup",
  toolbar:["create"],
  edit: function(e) {
    if (!e.model.isNew()) {
      var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
      numeric.enable(false);
    }
  }
});
</script>

3.cellClose事件

当使用incell编辑模式，并且在单元格将要关闭时触发。事件在保存或取消更改后触发，但是在单元格关闭之前触发。

参数：

• e.model：选中当前要编辑的数据，可以使用isNew()方法来检查数据项是新建还是编辑。
• e.sender：当前实例。
• e.container：编辑容器元素的JQ对象。
• e.type：单元格关闭操作的类型，可以是保存或取消。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true,
  cellClose:  function(e) {
    console.log(e.type);
    console.log(e.model);    //改变后的值
  }
});
</script>

4.change事件

用户在选择行或单元格时触发。this关键字被设置为当前实例。

参数：

• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: "multiple, row",
  change: function(e) {
    //选中当前行
    var selectedRows = this.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
      var dataItem = this.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem);
    }
     //选中的数据
    console.log(selectedDataItems);
   //选中的ID  (选中的为DataSource中schema中ID的值)
   var _select = this.selectedKeyNames();
  }
});
</script>

5.cancel事件

用户点击取消按钮或关闭弹出窗口时触发。

参数：

• e.model：选中当前要编辑的数据，可以使用isNew()方法来检查数据项是新建还是编辑。
• e.sender：当前实例
• e.container：编辑容器元素的JQ对象
• e.preventDefault：调用阻止取消操作。表格保持编辑模式。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command:'edit' }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: "popup",
  cancel: function(e) {
    e.preventDefault()
  }
});
</script>

6.remove事件

当用户点击删除命令，并在确认窗口中确认删除时触发。

参数：

• e.model：选中的数据项。
• e.row：当前表格行的JQ对象。
• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "destroy" }
  ],
  dataSource: {
    data:[
      { id: 1, name: "Jane Doe", age: 30},
      { id: 2, name: "John Doe", age: 33}
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true,
  remove: function(e) {
    console.log("Removing", e.model);
  }
});
</script>

7.save事件

数据项被保存时触发。

参数：

• e.model：被绑定到的数据项。如果e.model.id为空，则新创建的行将被保存。
• e.container：当前编辑容器元素的JQ对象。
• e.values：用户输入的值。仅在editable.mode选项设置为incell时可用。
• e.sender：当前实例。
• e.preventDefault：调用阻止保存操作。在incell中，编辑后的表格单元格将退出编辑模式。在"inline"和"pupop"编辑模式下，编辑表格将保持打开状态。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "destroy" }
  ],
  dataSource: {
    data:[
      { id: 1, name: "Jane Doe", age: 30},
      { id: 2, name: "John Doe", age: 33}
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true,
  save: function(e) {
    if (e.values.name !== "") {
      if (e.values.name !== e.model.name) {
        console.log("name is modified");
      }
    } else {
        e.preventDefault();
        console.log("name cannot be empty");
    }
  }
});
</script>

8.saveChanges事件

用户点击“保存”命令按钮时触发。

参数：

• e.preventDefault：如果调用，将不会调用数据源的同步方法。
• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "destroy" }
  ],
  dataSource: {
    data:[
      { id: 1, name: "Jane Doe", age: 30},
      { id: 2, name: "John Doe", age: 33}
    ],
    schema: {
      model: { id: "id" }
    }
  },
  editable: true,
  saveChanges: function(e) {
    if (!confirm("Are you sure you want to save all changes?")) {
       e.preventDefault();
    }
  },
  toolbar: ["save"]
});
</script>

9.sort事件

用户即将通过排序UI修改dataSource的排序描述符的当前状态时触发。

参数：

• e.sort：所选的排序描述符。
• e.sender：当前实例。
• e.preventDefault：如果调用阻止将更改应用于dataSource。

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: { id: "id" }
      }
    },
    sortable: true,
    sort: function(e) {
      console.log(e.sort);  
      console.log(e.sort.field);
      console.log(e.sort.dir);
    }
  });
</script>

10.page事件

用户更改当前页面的索引时触发。

参数：

• e.page：所选页面的索引。
• e.sender：当前实例。
• e.preventDefault：调用阻止。

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      pageSize: 1,
      schema: {
        model: { id: "id" }
      }
    },
    pageable: true,
    page: function(e) {
      console.log(e.page);
    }
  });
</script>

11.excelExport事件

用户点击excel按钮时触发。

参数：

• e.sender：当前实例。
• e.data：数据项的数组。
• e.workbook：excel配置对象，用于初始化一个kendo.ooxml.Workbook类。工作簿的修改将反应在输出的excel文档中。
• e.proventDefault：如果调用，将不会保存生成的文件。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["excel"],
  columns: [
    { field: "name" }
  ],
  dataSource: [
    { name: "Jane Doe"},
    { name: "John Doe"}
  ],
  excelExport: function(e) {
    e.workbook.fileName = "Grid.xlsx";
  }
});
</script>

12.pdfExport事件

当用户点击导出到PDF按钮时触发。

参数：

• e.sender：当前实例。
• e.preventDefault：如果调用，将不会保存生成的文件。
• e.promise：在导出完成时触发。

将定期调用以下参数：

• page：当前页面内容。
• pageNumber：当前页码。
• progress：范围为0-1的数字，表示当前导出操作的速度。
• totalPages：总页数

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["pdf"],
  columns: [
    { field: "name" }
  ],
  dataSource: {
    data: [{ name: "Jane Doe"},
           { name: "John Doe"},
           { name: "Tim Doe"},
           { name: "Alice Doe"}],
    pageSize: 2
  },
  pdf: {
      allPages: true
  },
  pdfExport: function(e) {
    e.promise
    .progress(function(e) {
        console.log(kendo.format("{0:P} complete", e.progress));
    })
    .done(function() {
        alert("Export completed!");
    });
  }
});
</script>

13.columnHide事件

用户隐藏某列时触发。

参数：

• e.column：列配置的JavaScript对象。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  columnMenu: true,
  columnHide: function(e) {
    console.log(e.column);
    console.log(e.column.field); 
  }
});

14.columnLock事件、columnUnlock事件

用户锁定时触发。

• e.column：列配置的JavaScript对象。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 100, locked: true },
    { field: "name", width: 100 },
    { field: "age", width: 50 }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30, id: 1 },
    { name: "John Doe", age: 33, id: 2 }
  ],
  columnMenu: true,
  columnLock: function(e) {
    console.log(e.column.field); 
  },
  columnUnlock: function(e) {
    console.log(e.column.field); 
  }
});
</script>

15.columnMenuInit事件

列菜单初始化时触发。

参数：

• e.sender：当前实例。
• e.container：编辑容器元素的JQ对象。
• e.field：列菜单初始化的列的字段。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
  ],
  dataSource: [
    { name: "Jane Doe", age: 30},
    { name: "John Doe", age: 33}
  ],
  columnMenu: true,
  columnMenuInit: function(e) {
    var menu = e.container.find(".k-menu").data("kendoMenu");
    console.log('menu',menu);
    var field = e.field;
    console.log('field',field);
    menu.append({ text: "Custom" });
    menu.bind("select", function(e) {
      console.log($(e.item).text());
      if ($(e.item).text() == "Custom") {
        console.log("Custom button for", field);
      }
    });
  }
});
</script>

16.columnMenuOpen事件

列菜单打开后，动画完成后触发。

参数：

• e.sender：当前实例。
• e.container：编辑容器元素的JQ对象。
• e.field：列菜单初始化的列的字段。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" },
    { field: "phone" }
  ],
  dataSource: [
    { name: "Jane Doe", id: 1, phone: "88443558741" },
    { name: "John Doe", id: 2, phone: "88443558751" }
  ],
  filterable: true,
  columnMenu: true,
  columnMenuOpen: function(e) {
    var menu = e.container.children().data("kendoMenu");
    menu.open(menu.element.find("li:first"));
  },
});
</script>

17.columnReorder事件

用户更改列的顺序时触发。

参数：

• e.sender：当前实例。
• e.column：列配置的JavaScript对象。
• e.newIndex：新的列索引值。
• e.oldIndex：上一次的列索引值。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  reorderable: true,
  columnReorder: function(e) {
    console.log(e.column.field, e.newIndex, e.oldIndex);
  }
});
</script>

18.columnResize事件

用户调整列大小时触发。

参数：

• e.sender：当前实例。
• e.column：列配置的JavaScript对象。
• e.newWidth：新的列宽。
• e.oldWidth：上一次的列宽。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  resizable: true,
  columnResize: function(e) {
    console.log(e.column.field, e.newWidth, e.oldWidth);
  }
});
</script>

19.columnShow事件

用户展示一列时触发。

参数：

• e.column：列配置的JavaScript对象。
• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  columnMenu: true,
  columnShow: function(e) {
    console.log(e.column.field); 
  }
});
</script>

20.dataBinding事件

在绑定其数据源之前触发。

参数：

• e.sender：当前实例。
• e.preventDefault：如果调用阻止数据绑定操作，表格行将保持不变，dataBound事件不会触发。
• e.action：导致dataBinding事件的操作。可能的值：rebind、sync、add、remove。
• e.index：如果添加或删除操作，则可用，显示添加或删除的元素索引。
• e.items：显示将要从DataSource添加、删除的元素的项目数组。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  dataBinding: function(e) {
    console.log("dataBinding");
  }
});
</script>

<div id="grid"></div>
<script>
function grid_dataBinding(e) {
  console.log("dataBinding");
}
$("#grid").kendoGrid({
  autoBind: false,
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBinding", grid_dataBinding);
grid.dataSource.fetch();
</script>

21.dataBound事件

绑定到其数据源中的数据时触发。

参数：

• e.sender：当前实例（this）

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  dataBound: function(e) {
    console.log("dataBound");
  }
});
</script>

22.detailCollapse事件、detailExpand事件

用户折叠、打开表格行时触发。

参数：

• e.detailRow：详细表格行的JQ对象。
• e.masterRow：主表行的JQ对象。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
  detailCollapse: function(e) {
    console.log(e.masterRow, e.detailRow);
  },
  detailExpand: function(e) {
    console.log(e.masterRow, e.detailRow);
  }
    
});
</script>

23.detailInt事件

在详细表格行初始化时触发。

参数：

• e.data：主表行被绑定的数据项。
• e.datailCell：细节表单元格的JQ对象。
• e.detailRow：详细表格行的JQ对象。
• e.masterRow：主表行的JQ对象。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    {
      name: "Beverages",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailTemplate: 'Products: <div class="grid"></div>',
  detailInit: function(e) {
    e.detailRow.find(".grid").kendoGrid({
      dataSource: e.data.products
    });
  }
});
</script>

24.filter事件

用户通过过滤器过滤数据时触发。

参数：

• e.filter：所选的过滤器的描述符。如果为Null，则过滤器已被清除。
• e.field：过滤器的构建领域。
• e.preventDefault：调用阻止将过滤器描述符添加到数据源。
• e.sender：当前实例。

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: { id: "id" }
      }
    },
    filterable: true,
    filter: function(e) {
      if (e.filter == null) {
        console.log("filter has been cleared");
      } else {
        console.log(e.filter.logic);
        console.log(e.filter.filters[0].field);
        console.log(e.filter.filters[0].operator);
        console.log(e.filter.filters[0].value);
      }
    }
  });
</script>

 25.filterMenuInit事件

过滤菜单初始化的时候，第一次打开的时候触发。

参数：

• e.container：过滤菜单表单元素的JQ对象。
• e.field：过滤菜单初始化的字段。
• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    { name: "Jane Doe"},
    { name: "John Doe"}
  ],
  filterable: true,
  filterMenuInit: function(e) {
    if (e.field == "name") {
      var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");
      firstValueDropDown.value("contains");
      firstValueDropDown.trigger("change");

      var logicDropDown = e.container.find("select:eq(1)").data("kendoDropDownList");
      logicDropDown.value("or");
      logicDropDown.trigger("change");

      var secondValueDropDown = e.container.find("select:eq(2)").data("kendoDropDownList");
      secondValueDropDown.value("contains");
      secondValueDropDown.trigger("change");
    }
  }
});
</script>

26.filterMenuOpen事件

过滤菜单打开后，在动画完成后触发。

参数：

• e.container：过滤菜单表单元素的JQ对象。
• e.field：过滤菜单初始化列的字段。
• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    { name: "Jane Doe"},
    { name: "John Doe"}
  ],
  filterable: true,
  filterMenuOpen: function(e) {
    if (e.field == "name") {
      e.container.find(".k-textbox:last").focus();
    }
  },
});
</script>

27.group事件

当用户即将分组数据源或通过表格修改组描述符状态时触发。

参数：

• e.groups：选定的组描述符。
• e.preventDefault：调用阻止将组描述符更改应用于DataSource和组面板UI。
• e.sender：当前实例。

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: { id: "id" }
      }
    },
    groupable: true,
    group: function(e) {
      if (e.groups.length) {
        console.log(e.groups[0].field);
        console.log(e.groups[0].dir);
      }
    }
  });
</script>

28.groupCollapse事件、groupExpand事件

用户折叠、打开组行时触发。

参数：

• e.element：表示组行的JQ对象。
• e.group：与组行对应的组对象。
• e.preventDefault：调用防止崩溃。
• e.sender：当前实例。

• <div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], groupable: true, dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ], groupCollapse: function(e) { console.log(e.element, e.group); }, groupExpand: function(e) { console.log(e.element, e.group); } }); </script>

29.navigate事件

当启用导航并且用户通过鼠标或键盘交互更改当前项目时触发。

参数：

• e.element：显示高亮单元格的JQ对象。
• e.sender：当前实例。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", width: 100, locked: true },
    { field: "name", width: 100 },
    { field: "age", width: 50 }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30, id: 1 },
    { name: "John Doe", age: 33, id: 2 }
  ],
  navigatable: true,
  navigate: function(e) {
    console.log(e.element); // displays the newly highlighted cell
  }
});
</script>