Controlling Group order in a Kendo UI Grid

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.

Try AddDescending and AddAscending, see examples below

@(Html.Kendo().Chart<T>()
[... other code ...]
.DataSource(ds => ds
    .Read(read => read.Action("action", "controller"))
    .Group(g => g.AddDescending(model=> model.property)) // <-- subtle difference here!
)
[... other code ...]
)

http://www.telerik.com/forums/stacked-chart-legend-order

Kendo's grouping sorts all elements in the array by a given field (for example fooBar), then iterates the sorted elements. In a nutshell, with pseudo code:

if (element[i].fooBar!= element[i-1].fooBar) { 
    StartNewGroup(element[i]);
} else {
    AddToLastGroup(element[i]);
}

Since the sorted array is required to do the grouping, it is tricky to change the sorting. I created code to override the internal groupBy() function, which allows me to sort the grouped results however I like:

function overrideKendoGroupBy() {
    var origFunc = kendo.data.Query.prototype.groupBy;
    kendo.data.Query.prototype.groupBy = function (descriptor) {
        var q = origFunc.call(this, descriptor);

        var data = SortYourData(q.data, descriptor.dir);

        return new kendo.data.Query(data);
    };
}

Call overrideKendoGroupBy() at some point after your page loads. Now just implement a SortYourData() function where q.data is an array of groupings, and descriptor.dir is "asc" or "desc". q.data[n] has an items array that contains the elements from your original data source that are contained in the nth grouping.

Note: This solution only works if you aren't using paging. The pages are broken up before grouping is applied, so all bets are off if your data spans multiple pages.