How to custom order Grid Grouping not by Alphabetically

[afiqdoherty]

Hi,

I've got a new request from client regarding the Grouping functions. By default, the grid will list all data based on channel starting from RED, YELLOW and GREEN. On first load, I already sort the list earlier in my stored procedure using Order By for the Channel Color. 

Currently, it is group by in Alphabetically Order (A-Z) when I drag the Channel Column to group. But, for Grouping function, my client also need the list to be grouped by Channel Order too. Hope you can help me on this

*please note that grid is not group by default.

Thanks :D

[Pavithra Subramaniyam]

Hi Muhammad, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your requirement. We would like to inform you that by default when you group a column in Grid, the column’s data will be sorted and then Grid will show the Grouped columns. We could see that your requirement is that you would like to display the Grid after Grouping as like sorting is not applied in Grid. We have prepared a sample based on this requirement. We are attaching the sample for your convenience. Please download the sample from the link below, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization1605070508 

 

In the above sample, we have set the initial sorted columns in Grid(initial sort to “CustomerID” column) and use the “SortComparer” function for “CusomerID”. In the sortComparer function we will be returning -1(which restrics sort). Now if you group the column in which the sort comparer is applied(say CustomerID column), it won’t show the Group in alphabetical order. Please refer the code example below, 

 

 

@{ 

    List<object> cols = new List<object>(); 

    cols.Add(new { field = "CustomerID", direction = "Ascending" });     //Column to apply initial sort 

} 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").SortComparer("sortComparer").Width("150").Add(); 

    ... 

}).AllowPaging().AllowSorting(true).SortSettings(sort => sort.Columns(cols)).AllowGrouping(true).Render() 

 

<script> 

    function sortComparer(reference, comparer) {     //Here you can define your custom sort function 

       return -1;     //return -1 will restrict the sort 

    }; 

</script> 

 

 

 

Please refer the screenshot below, 

 

 

 

Documentation :  

https://ej2.syncfusion.com/javascript/documentation/grid/sorting/?no-cache=1#custom-sort-comparer 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/sorting/#initial-sort 

 

Please get back to us if you need further assistance. 

 

Regards,  

Pavithra S. 

[afiqdoherty]

Wow...thanks sooo muchh Pavithra:))) it works :D

my result :)

regards,

afiq

[Pavithra Subramaniyam]

Hi Muhammad,  

Thanks for your update. 

We are happy to hear that the provided information helps you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S. 

[yohan kim]

Hi Pavithra,

Would you be able to provide the same sample for Syncfusion Blazor server grid.

Thanks and regards,

[Balaji Sekar]

Hi Yohan, 

By default, when performing grouping in a column, the ascending direction sorting will be applied for that column. Based on this scenario, we suggest you to use custom way of binding data to Grid. With this you can handle the DataOperations in a custom way using Read/ReadAsync method. Based on the request query you get in the DataManagerRequest you can customize the grid’s data operation actions. We have prepared a sample to prevent sorting of CustomerID column, please download the sample from the link below, 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1450600566 

 

References : 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/#data-binding 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/ 

In the below code, we have prevented the sort action handling inside Read method based on the Field name as CustomerID.  

 

       public override object Read(DataManagerRequest dm, string key = null) 

        { 

            ... 

            if (dm.Sorted != null && dm.Sorted.Count > 0 && dm.Sorted[0].Name != "CustomerID") 

            { 

                // Sorting 

                DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted); 

            } 

            ... 

            return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 

        } 

Please get back to us if you need further assistance. 

Regards, 

Balaji Sekar