First sort by Descending when clicking different column header

[Unknown]

By default, the grid sorts a column by ascending when clicking a different column header, is it possible to tell a grid to sort by descending when clicking a new column header?  I'm using URLAdapter if that makes a difference.

Example:  I have a grid with columns A, B, C.  The grid is currently sorted by column A.  I click the header for B and the grid sorts B ascending.  On next click of B, grid is sorted descending.  I would like to reversed that behavior:  First click sort B descending, second click B sort ascending.

Thanks.

[Madhu Sudhanan P]

Hi Jacob, 

Please use the below code example to achieve your requirement. In which we have extended the initiateSort method to override default sort operation. 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" load="load" actionComplete="actionComplete" actionBegin="actionBegin" allowSorting="true" allowPaging="true">                

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column> 

        </e-grid-columns> 

  

    </ejs-grid> 

</div> 

  

 

<script> 

  

    var flag = false; 

    var sortElem; 

    var selfCall = false; 

    var sortColumn; 

    function load(e) { 

        var grid = document.getElementById("Grid").ej2_instances[0];            

        grid.sortSettings.properties.allowUnsort = false; 

        grid.sortModule.initiateSort = function (target, e, column) { 

            var gObj = grid.sortModule.parent, field = column.field; 

            var direction = target.querySelectorAll(".e-ascending").length ? "Descending" : "Ascending"; 

            var isAvail; 

            var cols = grid.sortSettings.columns; 

            for (var i = 0; i < cols.length; i++) { 

                if (cols[i].field === column.field) { 

                    isAvail = true; 

                } 

            } 

            if (!isAvail) { 

                direction = "Descending"; 

  

            } 

            e.shiftKey || grid.sortModule.sortSettings.allowUnsort && target.querySelectorAll(".e-descending").length && !(gObj.groupSettings.columns.indexOf(field) > -1) ? grid.sortModule.removeSortColumn(field) : grid.sortModule.sortColumn(field, direction, e.ctrlKey || grid.sortModule.enableSortMultiTouch); 

  

        } 

 

    } 

    </script> 

Regards, 

Madhu Sudhanan P 

[Unknown]

Thanks so much.  This worked as expected and has the added benefit of disabling the "not sorted" behavior that you would usually get on the third click of a given header (I was always puzzled as to why you would want the third click to be "not sorted").  

2 other things.

1) As far as I can tell, those 4 variables that you declared before the load function are not needed.

2) It would be great if this functionality was built into the grids and could be enabled with a simple switch.

[Madhu Sudhanan P]

Hi Jacob, 

Query: “It would be great if this functionality was built into the grids and could be enabled with a simple switch.” 

Thanks for the suggestion. We will considered “Change sort direction using actionBegin event” as usability improvement. This will be included in any of our upcoming releases. 

Query:  was always puzzled as to why you would want the third click to be "not sorted" 

 

This behavior helps to clear sort without using SHIFT+CLICK behavior. However if you are not willing to use this feature, you can simply disable it by using allowUnSort property. 

https://ej2.syncfusion.com/angular/documentation/grid/api-sortSettingsModel.html#allowunsort 

Regards, 

Madhu Sudhanan P