Controlling Group order in a Kendo UI Grid

Question

Is there a way to control the order of the grouping in a Kendo UI grid. There is a group I would like to go before all other groups, but it seems Kendo UI grid sorts the groups alphabetically. I know that adding a space to the grouping name works but that's seems very hackish.

Thanks Leo

Answer 1

There is currently no way to sort a grouping on something other than the group's field. Having a way to sort groups like Telerik does in their non-Kendo grids is my biggest feature request for them right now. So we are stuck using hacks for now.

One hack that works for me is to combine the sorting field and the display field into a new string column that hides the sorting field portion inside a hidden span. This is done on the data source side (for me, in SQL). The new column is then sorted as a string even if the sorting field was a number, so you have to pad appropriately in some cases.

For example, if my data was:

[ 
    { 
      'Name': 'Alice', 
      'Rank': 10, 
      'RankName': '<span class="myHiddenClass">10</span>Alice', 
      ... (other fields)
    },  
    { 
      'Name': 'Bob', 
      'Rank': 9, 
      'RankName': '<span class="myHiddenClass">09</span>Bob', 
      ... (other fields)
    },  
    { 
      'Name': 'Eve', 
      'Rank': 11, 
      'RankName': '<span class="myHiddenClass">11</span>Eve', 
      ... (other fields)
    } 
    ... (Multiple Alice / Bob / Eve records)
]

Then I can group by the RankName field instead of the Name field. It will display the Name field in the group header but be sorted by the Rank field. In this case, Bob will show up as the first group even though Alice was first alphabetically. This works similarly to the space padding you mentioned.

Answer 2

The below code will push the group that fulfils the if condition to bottom of the grid

group: {
    dir: "asc",
    field: "FieldToGroupBy",
    compare: function (a, b) {
        if (b.value == "GROUP_TO_SHOW_LAST") {
            return -1; // this will push the group to bottom
        }
    }
},

If you want to compare groups with each other, you should use a and b and then set the return value accordingly. You need to play around with the return value based on your requirement.

Note: return value should be any of 0, 1, -1