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

groupHeaderTemplate when creating a Grid from an HTML Table

1 Answer 122 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Iron
John asked on 05 Apr 2017, 09:57 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 07 Apr 2017, 01:07 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Iron
Answers by
Tsvetina
Telerik team
Share this question
or