Question

There doesn’t appear to be any documentation about grouping via the client-side API for the Telerik Grid for MVC in Telerik’s Wiki and Google results aren’t coming up with any results specific to client side api and grouping via javascript. There is info on how to expand and collapse groups, but nothing about creating new or removing existing groups. This functionality appears to be exposed when firebug inspects the grid data object:

But any attempts to call the functions either result in errors or do nothing at all. I took a look at the script in telerik.grid.grouping.min.js, but it’s obfuscated beyond comprehension. When calling dataGrid.group(“Character.Name-asc”), I get the following error which leads me to believe there are additional parameters I need to send with it:

Does anyone have any examples in adding new groups dynamically via javascript? I’m trying to add support to allow users to add groups for hidden columns; and since hidden columns aren’t shown for users to drag them to the grouping area, I’m going to add a fly-out feature that lets users click on columns to add groups for. And to do this, I’ll need to tell the grid to group by clicked on columns.

PS: I would have posted this in the Telerik forums, but I’ve gotten 100% more help with Telerik related questions here than I ever have in their forums.

Answer 1

After a bunch of trial and error, it turns out the parameters pattern for the group function is different than it’s filter and sort sister functions. The group function takes two parameters, the Column title, and the sort direction:

gridData.group("Char", "asc");

Note: The column title is the actual text displayed for the column in the grid (if you specified the title for a column such as below), not the default column name generated for a property.

columns.Bound(o => o.CharacterName).Title("Char").Hidden(true);

I hope this helps someone!