This is a migrated thread and some comments may be shown as answers.

Cannot set Grid datasource group header title

9 Answers 1328 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Subhadip
Top achievements
Rank 1
Subhadip asked on 24 Aug 2012, 06:41 AM
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.

9 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 28 Aug 2012, 12:18 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Subhadip
Top achievements
Rank 1
answered on 28 Aug 2012, 12:54 PM
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.
0
Iliana Dyankova
Telerik team
answered on 30 Aug 2012, 04:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Subhadip
Top achievements
Rank 1
answered on 08 Oct 2012, 11:28 AM
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.

0
Iliana Dyankova
Telerik team
answered on 09 Oct 2012, 04:34 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Subhadip
Top achievements
Rank 1
answered on 14 Dec 2012, 06:44 PM
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({
                        datamovies
                    });

dataSource.group([field"rating"}]);
$("#grid").kendoGrid({
                        dataSourcedataSource,
                        sortabletrue,
                        scrollablefalse,
                        pageabletrue,
                        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.
0
Accepted
Jason
Top achievements
Rank 1
answered on 19 Dec 2012, 07:09 AM
Subhadip,

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

var dataSource new kendo.data.DataSource({
                        datamovies
                    });

dataSource.group([field"rating"}]);
$("#grid").kendoGrid({
                        dataSourcedataSource,
                        sortabletrue,
                        scrollablefalse,
                        pageabletrue,
                        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
0
Subhadip
Top achievements
Rank 1
answered on 19 Dec 2012, 10:17 AM
Thanks for the reply. This is what I wanted.
It was easy. :)
0
Emmit
Top achievements
Rank 1
answered on 10 Jun 2014, 03:23 PM
you can also add hidden:true to the column, same thing
Tags
Grid
Asked by
Subhadip
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Subhadip
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Emmit
Top achievements
Rank 1
Share this question
or