Default Sorting with data source

Snippet
Hi I am using EJ1 Grid with MVC shown below. i have specific requirement. when click on column first time in grid it sort ascending. i want to change that to descending so that they don't need to click twice to get to data they want. is there any way to achieve this. i don't want to set initial sorting to descending for some columns. i just want when user clicks first time on column it should sort descending instead of ascending for few columns. is there any

@(Html.EJ().Grid<object>("topSupplierYTD")                     .Datasource((System.Data.DataTable)ViewBag.topSuppliersData)                     .AllowFiltering()                     .AllowPaging(false)                     .AllowResizing()                     .EnableHeaderHover()                     .EnableRowHover(false)                     .AllowSelection(false).AllowSorting()                     .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })                         .Columns(col =>                         {                             foreach (var item in (List<string>)ViewBag.allColumns)                             {                                 if (item == "Supplier")                                 {                                     col.Field(item).HeaderText(item)                               .TextAlign(TextAlign.Left)                               .Add();                                 }                                 else                                 {                                     col.Field(item).HeaderText(item)                             .TextAlign(TextAlign.Left).Format("{0:N2}").Width("120")                             .Add();                                 }                             }                         })                     .AllowTextWrap(true)                    )

1 Reply

PS Pon Selva Jeganathan Syncfusion Team December 2, 2021 04:28 PM UTC

Hi Sandip, 
 
Thanks for contacting syncfusion forum.   

Query: i just want when user clicks first time on column it should sort descending instead of ascending for few columns.

We achieved this requirement by using the actionBegin event and actionComplete event of the treegrid. While clicking the first time, we set the sorting direction as descending on the actionBegin event. In the actioncomplete event we collect the field name and direction. Based on that we set the sorting direction in the actionBegin event

Please refer to the below code,

@(Html.EJ().Grid<object>("Grid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .AllowPaging() 
        .AllowSorting ClientSideEvents(eve => { eve.ActionBegin("begin"); eve.ActionComplete("complete"); }) 
        .Columns(col => 
           { 
              col.Field("OrderID").Add(); 
              col.Field("EmployeeID").Add(); 
              col.Field("ShipCity").Add(); 
              col.Field("ShipCountry").Add(); 
              col.Field("Freight").Add(); 
            }) 
          ) 
<script> 
function begin(args) { 
        if (args.requestType == 'sorting') { 
           if (col == undefined) { 
                col = args.columnName; 
                direction = args.columnSortDirection; 
            } 
            var obj = $("#Grid").ejGrid("instance"); 
            if (col == obj.model.sortSettings["sortedColumns"][0].field) { 
                if (args.columnSortDirection == "ascending" && direction == "ascending") { 
                    obj.model.sortSettings["sortedColumns"][0].direction = "descending"; 
                } 
                else if (args.columnSortDirection == "descending" && direction == "descending") { 
                    obj.model.sortSettings["sortedColumns"][0].direction = "ascending"; 
                } 
 
            } 
        } 
    } 
    function complete(args) { 
        
        if (args.requestType == 'sorting') { 
             var obj = $("#Grid").ejGrid("instance"); 
            col = obj.model.sortSettings["sortedColumns"][0].field; // sorted field name 
            direction = obj.model.sortSettings["sortedColumns"][0].direction; // sorted direction 
        } 
    } 
</script> 
  
Please find the below sample link:  

Please refer to the below API documentation,

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete

Kindly get back to us for further assistance.

 
Regards,   
Pon selva   

 


Loader.
Up arrow icon