Kendo Grid header click sorting with grouping

Question

In Kendo grid, I wanted to show set of rows on top always. I am doing this based on an 'GroupField(values 1,2)' field and each group having different coloring pattern. On sorting, records need to sort in this group. I am able to sort among this group but the problem is last group is coming first.

In column definition i am calling a function in sortable block as shown below, function definition is also shown.

sortable: {
                            compare : function (a, b) {
                            return generateCompare(a, b, 'FieldNameToSort');
                        }

function generateCompare(a, b, field) {
 if (a.GroupField == b.GroupField)
                 result = a[field] === b[field] ? 0: a[field]> b[field] ? 1 : -1;
            else if (a.GroupField > b.GroupField)
                 result = -1;

}

Am I doing in the right way to get it done or is there any issue in my sort logic?

Answer 1

I got a simple workaround for this. Don't need to go for the function call I mentioned in the question. Just specify group in the data-source as shown below.

var dataSource = new kendo.data.DataSource({
                    data: data,
                    pageSize: 20,
                    group: { field: "GroupField" }
                 });

If you don't want to display the group field and grouping styles, use this jQuery in the databound of the kendo grid options:

$scope.kendoGridOptions = {
                dataBound: function (e) {
                    var grid = e.sender;                        
                        $(".k-group-col,.k-group-cell").remove();
                        var spanCells = $(".k-grouping-row").children("td");
                        spanCells.attr("colspan", spanCells.attr("colspan") - 1);
                        $('.k-grouping-row').addClass('ng-hide');                           
                }
            };