1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to custom order Grid Grouping not by Alphabetically

How to custom order Grid Grouping not by Alphabetically

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



5 Replies
PS Pavithra Subramaniyam Syncfusion Team February 14, 2019 06:32 AM UTC

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, 
 
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 :  
 
Please get back to us if you need further assistance. 
 
Regards,  
Pavithra S. 


AF afiqdoherty February 14, 2019 06:52 AM UTC

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

my result :)



regards,

afiq

PS Pavithra Subramaniyam Syncfusion Team February 14, 2019 06:54 AM UTC

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. 


YK yohan kim June 7, 2021 10:28 PM UTC

Hi Pavithra,

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

Thanks and regards,

BS Balaji Sekar Syncfusion Team June 8, 2021 02:20 PM UTC

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, 
 
 
References : 

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 


Loader.
Up arrow icon