groupHeaderTemplate when creating a Grid from an HTML Table

[John]

HI all,

I've got a simple HTML table that I'm turning into a Grid. I need to Group the Grid. I have all of that working...

When I define the Grouping I choose which Field to Group on. This automatically sorts the data by this Field. However, my requirement to to actually sort by a different Field.

ie: The Grouping Field is text, but the sorting is a different numeric Field.

I can Group by the numeric Field, but then what I want is to use a groupHeaderTemplate to instead display the text of the other Field.

So, my question is twofold.

- Can I Group by my text Field, but sort the Grouping by my numeric Field?
- Or, can I Group by my numeric Field, but display the text of my other Field?

Just remember...my data is sourced from an HTML table.

I hope all that makes sense.

Thanks
John

 

[Tsvetina]

Hello John,

The group is always only sorted by its group field. Also, the fields available in group header template are only the ones related to the actual grouping operation:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.groupHeaderTemplate

It is possible to get the text value for the group heaer from the DataSource, but you will need to traverse DataSource data for each group header. If you are going to render many group headers in one page and have large data, this could be slow, so you should test it first.

1. Group by the numeric field and define a header template that gets its value using a function:

   { field: "CategoryID", title: "Category", width: "180px", groupHeaderTemplate: "#=getName(value)#"  },

2. In the getName function, loop through the DataSource groups until you find the one, which value corresponds to the current group value and then access the text value from the first item in this group:

   function getName(value){
     var groups = $("#grid").data("kendoGrid").dataSource.view(),
         len = groups.length;
     for(var i=0; i<len; i++){
       if(groups[i].value==value){
         return groups[i].items[0].CategoryName;
       }
     }
     return value;
   }

Regards,
Tsvetina
Telerik by Progress