Kendo Grid Sort By Descending Before Ascending on Header Click

Question

Default sort direction of kendo grid is ascending when we click on header column.

I want to sort kendo grid in descending order when user click on header first time.

Example:

1. Default Behavior

Studnet   Marks
abc        15
pqr        25
xyz         7

2. When Clicking on Marks Header first time

Student  Marks

pqr        25
abc        15
xyz         7

3. When clicking on Marks header second time.

Students   Marks
 xyz        7
 abc        15
 pqr        25

I am tring something like this:

 $("#priority .k-header").eq(1).click(function(ele) {
            debugger;
            var kendoGrid = $("#priority").data('kendoGrid');
            var dsSort = [];
            var sort = kendoGrid.dataSource.sort();
            if (sort.length > 0) {
                if(sort[0].dir==="asc")
                    kendoGrid.dataSource.sort({field: sort[0].field, dir: "desc"});
                if(sort[0].dir==="desc")
                    kendoGrid.dataSource.sort({field: sort[0].field, dir: "asc"});
            }

        });

But it does not work.

Answer 1

I was looking for this as well and came across this question. I found the solution in the meantime. We create a function to reverse the fields:

function reverseSortOrderSequence() {

            setTimeout(function() {
                var colSortHeaders = $("#gridId [data-role='columnsorter']");
                $.each(colSortHeaders, function(index, item) {
                    if ($(item).attr("data-dir") === undefined) {
                        $(item).attr("data-dir", "asc");
                    } else if ($(item).attr("data-dir") === "asc") {
                        $(item).attr('data-dir', 'desc');
                    } else if ($(item).attr("data-dir") === "desc") {
                        $(item).attr('data-dir', null);
                    }
                });
            });
        }

Just replace gridId with your kendo grid's ID.

Then, call this function in the dataBound property of your Kendo Grid configuration:

{...
   columns: ...,
   dataBound: function(event) {
       reverseSortOrderSequence();
   }
}

Answer 2

Specify Sorting in kendo datasource as below :

$("#grid").kendoGrid({
        dataSource: {
            ..
            , sort: { field: "Marks", dir: "desc" } 
           ..
        }
    });

Edited you may try like this

set a global value and Call change dataSource function

var firstClick=true;

    $('#grid').data().kendoGrid.dataSource.bind('change', function(e) {
         if(firstClick){
            var kendoGrid = $("#grid").data('kendoGrid');
            var dsSort = [];
            dsSort.push({ field: "fieldName1", dir: "asc" });
            dsSort.push({ field: "fieldName2", dir: "desc" });
            ...
            kendoGrid.dataSource.sort(dsSort);
            firstClick=false;
          }
});