Kendo Grid Group Sort and Group Row Coloring

[Isaac]

I have two questions regarding row grouping with my Kendo Grid that is being built from an existing HTML table.

First, the rows in the table are already sorted by the column to group by before the table becomes a Kendo Grid. This sorting is not ascending or descending, but is a custom sort that should never change. Here is the Kendo Grid initialization code where I group by the groupNumber column.

var grid = $("#myHTMLGrid").kendoGrid({
    dataSource: {
        group: {
            field: "groupNumber"
         }
     },
});

By default, grouping the rows causes the group rows to be sorted in ascending order. Can I possibly prevent the group rows from being reordered in any way so that the table holds true to the initial ordering?

My second question is this. I need to color code the group rows based on the values of groupNumber. How can this be accomplished? Thank you.

 

[Dimiter Topalov]

Hello Isaac,

1) Unfortunately, the desired behavior is not supported. There is no custom compare function that can be used for sorting the groups. The columns.sortable.compare option applies to the items in the groups only (or all items, if the data is not grouped).

The Groups on the other hand, are sorted, using the default sorting method for the corresponding type (lexicographically for strings), and the only option that can be adjusted is the direction (asc/desc):

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-group.dir

2) You can use the columns.groupHeaderTemplate, and apply some custom logic based on the value

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerTemplate

Check out a sample implementation in the following simple example:

http://dojo.telerik.com/IFASi/2

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress