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:当前实例。(就是当前Grid)
<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>
来自:https://www.cnblogs.com/zsj-02-14/p/9255135.html