Cannot set Grid datasource group header title

[Subhadip]

I am unable to set the Grid Datasource Group Header Title. My code is as follows

var gridDataSource = new kendo.data.DataSource({});
gridDataSource.group([{ field: "Group1" }, { field: "Group2"}]);

after adding the data in Datasource, the Grid is showing the grouping, but Group Header is showing as "Group1" (The field name), but I need to show different Header Name. Please let me know how this can be achieved.

[Iliana Dyankova]

Hi Subhadip,

You could achieve the desired functionality using groupHeaderTemplate for the columns. For convenience I prepared a small example which illustrates the suggested approach in action - please find it attached.
 
Kind regards,
Iliana Nikolova
the Telerik team

[Subhadip]

Actually, my requirement is to not to show the group by fields in the Grid, though the fields are present in the Grid Data Source.

So can't set groupHeaderTemplate property for those columns.

Let me know if you need further inputs.

[Iliana Dyankova]

Hello Subhadip,

I am not sure if I understand your scenario correctly. Could you please elaborate s bit mode on the exact functionality you are trying to implement? Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
the Telerik team

[Subhadip]

I am using following syntax for grouping

var gridDataSource = new kendo.data.DataSource({});
gridDataSource.group([{ field: "Group1" }, { field: "Group2"}]);

Now the Group Header is showing as fieldName( here Group1), I want the Header Name to customize say "My Custom Group", then what is the way to achieve that. Please could you post some code example in Fiddler or JSBin.

[Iliana Dyankova]

Hi Subhadip,

If I understand your scenario correctly you have a groupable grid and would like to set a custom text in the group headers? If this is the case please check the demo page I created for you and attached in my first post. If your scenario is different please provide more detailed information. Thank you in advance for your cooperation. 

Regards,
Iliana Nikolova
the Telerik team

[Subhadip]

My Example is as below

HTML

<div id="grid"></div>

JScript

var movies = [
                        { "rank": 1,  "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption" },
                        { "rank": 2,  "rating": 9.2, "year": 1972, "title": "The Godfather" },
                        { "rank": 3,  "rating": 9,   "year": 1974, "title": "The Godfather: Part II" },
                        { "rank": 4,  "rating": 8.9, "year": 1966, "title": "Il buono, il brutto, il cattivo." },
                        { "rank": 5,  "rating": 8.9, "year": 1994, "title": "Pulp Fiction" },
                        { "rank": 6,  "rating": 8.9, "year": 1957, "title": "12 Angry Men" },
                        { "rank": 7,  "rating": 8.9, "year": 1993, "title": "Schindler's List" },
                        { "rank": 8,  "rating": 8.8, "year": 1975, "title": "One Flew Over the Cuckoo's Nest" },
                        { "rank": 9,  "rating": 8.8, "year": 2010, "title": "Inception" },
                        { "rank": 10, "rating": 8.8, "year": 2008, "title": "The Dark Knight" }
                    ];

var dataSource = new kendo.data.DataSource({
                        data: movies
                    });

dataSource.group([{ field: "rating"}]);
$("#grid").kendoGrid({
                        dataSource: dataSource,
                        sortable: true,
                        scrollable: false,
                        pageable: true,
                        columns: [
                            { field: "rank", title: "Rank"},
                            { field: "year", title: "Year" },
                            { field: "title", title: "Movie Name"}
                        ]
                    });​

Now I want to customize the Header Name from "rank" to "Movie Rating"

What is the way-out to do that.

Please prepare a JSFiddle for the solution.

[Jason]

Subhadip,

I believe you can add achieve what you want like so:

var dataSource = new kendo.data.DataSource({
                        data: movies
                    });

dataSource.group([{ field: "rating"}]);
$("#grid").kendoGrid({
                        dataSource: dataSource,
                        sortable: true,
                        scrollable: false,
                        pageable: true,
                        columns: [
{ field: "rating", title: "Movie Rating"},
                            { field: "rank", title: "Rank"},
                            { field: "year", title: "Year" },
                            { field: "title", title: "Movie Name"}
                        ]
                    });​
$("grid").data("kendoGrid").hideColumn("rating");

Enjoy!
J

[Subhadip]

Thanks for the reply. This is what I wanted.
It was easy. :)

[Emmit]

you can also add hidden:true to the column, same thing