以编程方式更改 Kendo Grids DataSource 组答案

【问题标题】：Change Kendo Grids DataSource group programmatically以编程方式更改 Kendo Grids DataSource 组
【发布时间】：2015-12-08 00:09:23
【问题描述】：

如何在 Kendo 网格渲染后以编程方式更改组？我在我的 TypeScript 中尝试过这样的功能：

changeGroupBy() {
    var group = $('#ddGroupBy').val();
    var grid = $('#objectsListGrid').data('kendoGrid');
    var options = grid.options;

    options.dataSource = this.objectsList;
    options.dataSource.group = group;
    grid.refresh();
}

当我使用上面的代码时，我得到一个错误 this.group 不是一个函数？

【问题讨论】：

标签： jquery typescript kendo-grid

【解决方案1】：

看起来现在有更好的方法可以做到这一点。渲染网格后，只需在下面使用

$('#objectsListGrid').data('kendoGrid').dataSource.group({field: $('#ddGroupBy').val()});

如果有多个“分组依据”字段，请在下面使用

$('#objectsListGrid').data('kendoGrid').dataSource.group(
 [
  {field: $('#ddGroupBy').val()},
  {field: $('#ddGroupBy2').val()}
 ]
);

这里是详细信息 https://www.telerik.com/forums/grid---dynamically-change-grouping

【讨论】：

【解决方案2】：

你应该使用：dataSource.group({ field: "yourField" });

这里解释：http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-group

【讨论】：

这是我已经知道的预渲染方法。我需要能够在页面呈现后更改分组。用户将在下拉列表中选择一个值，我想根据他们选择的字段触发分组。

【解决方案3】：

事实证明，您不能只在网格渲染后设置组属性，而无需先获取对网格及其选项的引用，然后销毁网格并重建它。这些是我执行的步骤，并且工作正常：

    var grid = $('#objectsListGrid').data('kendoGrid');

    this.getObjects(this.projectNumber);
    var options = grid.options;


    options.dataSource = this.objectsList;
    options.dataSource.group({ field: group });
    grid.destroy();

    $('#objectsListGrid').empty().kendoGrid(options);
    grid.dataSource.read();

【讨论】：