groupHeaderTemplate when creating a Grid from an HTML Table

2 posts, 0 answers
  1. John
    John avatar
    16 posts
    Member since:
    Dec 2015

    Posted 05 Apr 2017 Link to this post

    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 data is sourced from an HTML table.

    I hope all that makes sense.



  2. Tsvetina
    Tsvetina avatar
    2481 posts

    Posted 07 Apr 2017 Link to this post

    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:

    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++){
            return groups[i].items[0].CategoryName;
        return value;

    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.
Back to Top