Change Kendo Grids DataSource group programmatically

kendo grid grouping
kendo group
kendo grid default grouping
kendo grid api
kendo grid group rows
kendo grid group header template
kendo-grid angular
kendo grid aggregate calculated column

How can I change the group programmatically after the Kendo grid has been rendered? I have tried a function like this in my 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();
} 

When I used the above code I get an error that this.group is not a function?

You should use: dataSource.group({ field: "yourField" });

As explained here: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-group

How to set grid grouping programatically in Kendo UI for jQuery Grid , In order group the DataSource data, you should use its group method. Greetings, Rosen the Telerik team. Join us on our journey to create the  group. Gets or sets the grouping configuration. Parameters value Object|Array. The grouping configuration. Accepts the same values as the group option. Returns. Array—The current grouping configuration. Example - group the data items

It turns out you can't just set the group property AFTER the grid has been rendered without first getting a reference to the grid and it's options and then destroying the grid and rebuilding it. These are the steps I did and it is working correctly:

    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();

group - API Reference, Example - group the data items. Edit Preview Open In Dojo. <script> var dataSource = new kendo.data.DataSource({ data: [ { name: "Tea", category: "​Beverages" }  The grouping configuration of the data source. If set, the data items will be grouped when the data source is populated. By default, grouping is not applied. The data source groups the data items client-side unless the serverGrouping option is set to true. Example - set a group as an object

Looks like there is a better way to do it now. After the grid is rendered just use below

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

Also for multiple 'Group by' fields if any, use below

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

Here are the details https://www.telerik.com/forums/grid---dynamically-change-grouping

Kendo DataSource: Grouping then Sorting - Falafel Software, It seems that Kendo DataSource (and, thus, the Kendo Grid) cannot do both Grouping When sorting is defined without grouping, then everything works fine. Edit in JSFiddle Facebook Login Using Selenium and C# (. Widgets / Data Management / PivotGrid / How To / Managing Dimensions. Change DataSource Dynamically. The following example demonstrates how to dynamically change the data source of a Kendo UI PivotGrid widget.

Multiple Ways To Bind Data To Kendo Grid In MVC, In this article, we will learn how to bind data to Kendo Grid in MVC using multiple ways. It provides many options, such as paging, sorting, filtering, grouping, Change the datasource on change event of any HTML controls. setDataSource. Sets the data source of the widget. Parameters dataSource kendo.data.DataSource. The data source to which the widget should be bound. Example - set the data source

Kendo Grid In Action, We use HTML table for showing filtered data (dynamically changed data). Problem Kendo Grid gives us option to bind JSON data with table dynamically. dataSource.remove(dataItem); //Removing row using index number gview. Now I am working as a Software Engineer(.net) at Daffodil Group. In our design we have two buttons which are responsible to switch the kendo grid dataSource. Show Company A – Button: This button is used to trigger the DisplayGridA function which is used to set the dataSourceA as DataSource of the kendo grid using the setDataSource function.

Kendo UI Grid programmatically add a new row to the grid by , var grid = $("#grid").kendoGrid({. 6. dataSource: {. 7. data: [. 8. { FileName: 'need to get the value from the text box', LastName: 'LastName'},. 9. { FileName: 'need 

Comments
  • This is the pre-rendered method which I already know about. I need to be able to change the grouping after the page has been rendered. A user will select a value in a drop down and I want to trigger a grouping based on the field they selected.