kendoGrid Event事件

最新推荐文章于 2020-12-22 23:25:41 发布
最新推荐文章于 2020-12-22 23:25:41 发布
阅读量771 收藏 3
点赞数
文章标签： ui javascript ViewUI
原文链接：http://www.cnblogs.com/zsj-02-14/p/9255135.html
版权

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>

 

转载于:https://www.cnblogs.com/zsj-02-14/p/9255135.html

abza7117
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（4）kendo UI使用基础介绍与问题整理——Grid问题/导出excel
weixin_33878457的博客
01-10 1116
一、简要和demo Grid自带导出Excel的功能，先上一个官网的demo： 链接：https://demos.telerik.com/kendo-ui/grid/excel-export 简略代码如下： toolbar: ["excel"], excel: { fileName: "Kendo UI Grid Export.xlsx", ...
kendoGrid单击、双击事件绑定并获取当前行数据
左右为南的专栏
05-25 1万+
在对于table进行处理时候，最常用的还是点击或者双击当前行，从而获取当前行的数据， var detailgrid = $("#Grid").kendoGrid({ dataSource: detailSources, columns: [ { field: 'nam
Kendo UI Grid saveAsExcel
qq_32663673的博客
12-05 1521
Kendo UI_Grid Export to Excel ##Grid saveAsExcel使用Grid控件将网页数据导出为Excel Grid saveAsExcel 使用Grid控件将网页数据导出为Excel Grid saveAsExcel Kendo Ui控件,现在中文API几乎没有,对于好多刚入门的小伙伴来说非常困难. 如何使用Grid saveAsExcel?(我花...
kendoGrid edit功能
abza7117的博客
07-02 633
1.编辑的三种方式 editable:true //单元格编辑 editable:'inline' //行内编辑 editable:'popup' //弹出编辑 2.自定义编辑模式 columns:[ { field:'', title:'', editor:Editor } ] //下拉列表 fun...
KendoUI之Grid的问题详解
热门推荐
再烦，也别忘微笑；再急，也要注意语气；再苦，也别忘坚持。
10-24 2万+
KendoUI之Grid的问题详解 KendoUI之Grid的问题详解 1.kendoLov带出的值出现 null和undefined 2.Grid不可编辑时，设置行背景颜色 3.设置Grid某列的Title样式和列内数据样式 4.修改某个字段之后 点击保存按钮没有任何效果 5.检查Grid行中是否还有数据没有保存 6.检查Grid选中的数据是否有脏数据 7.Grid保存之后自动刷新数据...
Kendo UI Grid 用法详细整理
yzh的博客
12-12 2万+
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，用的更加灵活，加油吧。 知识无极限，与你来相见，欢迎点赞支持！...
MVC Kendo总结之-----> Grid（Edit、Cancel、Save、First、Prev、Next、Last）
chelen_jak的专栏
12-20 1026
原文出处：http://blog.csdn.net/u013028110/article/details/48521379 [csharp] view plain copy @(Html.Kendo().Button()      .Name("EDIT")      .Content("Edit")      .Events(events =
《kendoGrid》动态修改某一列的数据并调用save方法
sinat_36497286的博客
08-07 4141
今天在项目中遇到一个问题，有需求需要去使用js动态的修改KendoUI Grid的某一列数据，并保存到数据库，一开始我是这样写的： var dataGrid = $("#grid").data("kendoGrid"); var data = dataGrid._data; var messageList = []; if (data.lengt...
Kendo事件的使用
Nemo的笔记本
04-12 1370
 .Events(events=&gt;events.Change("SelectChange") )绑定点击事件function SelectChange (e) {if (this.select().find('input[type=checkbox]').attr('checked')) {this.select().find('input[type=checkbox]').removeAt...
kendo.ui.Grid绑定单双击事件
sakuya_tan的专栏
05-17 6041
var grid = $("#grid").kendoGrid({             columns: [         { field: "id" },         { field: "name" }             ],             dataSource: [                 { id: "1", name: "lili" },
gridsortingpagingevents
09-22
gridsortingpagingevents,利用kendoui控件捕获grid的page分页事件
kendoui固定宽度_Kendoui之grid保存为Excel
weixin_39612038的博客
12-22 161
Kendoui中的Grid组件是一个强大的报表生成组件，可以通过读取dataSource._data来快速生成一个便于浏览的报表，并提供一系列对报表的操作；API:http://www.kendoui.io/kendo-ui/api/javascript/ui/grid.html在制作报表时常会遇到的需求是报表的导出。将报表导出为一个Excel格式更便于浏览、维护及打印。同时Grid也提供了此功能...
Kendo UI框架grid的Excel导出功能改进
qq_28830129的博客
08-26 2532
Kendo UI框架提供了自带的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据不是excel中该存的数据 Kendo UI默认导出的是该列的value值，及查出来的值，有时候我们会用template渲染一下导出的列，比如将“Y”显示成“是”，把“N”...
kendo grid表格加载完成之后触发事件dataBound
木枫
08-14 7532
今天在做表格显示时 需要在kendo grid表格生成之后根据其中一个字段的值进行整列的渲染（底部颜色不同），显示图片如下：在表格生成之后调用其获取其行的数据，在得到相应的字段值进行判断然后给予相应的css样式，但建立的前提在此事件必须在表格加载完成之后才能触发。这样一遍获取到相应的参数，使用了window.onload 方法结果不行 ，在表格没加载完成之前就执行了，最终找到了kendo 中的一个d
kendoGrid 通Click事件获取行列(Cell)信息
chelen_jak的专栏
12-20 5116
原文出处：https://stackoverflow.com/questions/17343371/how-to-get-row-index-and-cell-index-of-row-click-kendo-grid 示例1： function onDataBound(e) { var grid = $("#Grid").data("kendoGrid"); $(grid
kendo ui grid选中行事件，获取combobox选择的值
weixin_34146410的博客
08-23 1197
背景： 以前用 telerik ui做的grid现在又要换成kendo ui，不过说句实话kendo ui真的比telerik好多，可以说超级升级改头换面。当然用的mvc的辅助方法，以前的telerik ui 选中行的事件是 .OnRowSelect("SelectRow”) ，换成kendo ui 选中行的事件是 .Events(p=>...
KendoUI所有事件自带功能的事件
火麒马
12-28 3033
各位朋友，当你看到下面的事件的时候，你的思想上已经完成这个功能了 events: [ CHANGE, 'dataBinding', 'cancel', DATABOUND, DETAILEXPAND, ...
基于event事件触发控制
最新发布
10-22
基于event事件触发控制是一种常见的编程方法，它允许我们在特定的事件发生时执行代码或触发一些动作。在这种控制下，我们可以定义需要监听的事件，并通过设置相应的回调函数来处理这些事件。 事件可以是用户的操作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值