We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Grid Column Custom Sort, ie sort by Country+OrderDate by clicking Country column header

Grid Column Custom Sort, ie sort by Country+OrderDate by clicking Country column header

Not sure how to define a grid with a column so it sorts on more then one column WITHOUT having my clients click on multiple column headers.

For example, an invoice grid with a state and order date columns.  When clicking the state header to sort by state, the rows need to also be sorted by date, click on column header client, the grid needs to show the order as Client + Order Date.

How would I do this?

3 Replies
RS Renjith Singh Rajendran Syncfusion Team October 16, 2019 07:22 AM UTC

Hi PeterHup, 

Thanks for contacting Syncfusion support. 

We suggest you to use the “SortColumn” method of Grid inside the “OnActionComplete” event handler to achieve this requirement.  
 
Please use the code below, 

 
<EjsGrid @ref="GridInstance" DataSource="@Orders" AllowSorting="true" AllowMultiSorting="true"  AllowPaging="true"> 
    <GridEvents OnActionComplete="OnActionComplete" TValue="Order"></GridEvents> 
    ... 
</EjsGrid> 
 
@code{ 
    EjsGrid<Order> GridInstance; 
    ... 
   public async void OnActionComplete(ActionEventArgs<Order> args) 
    { 
        if(args.RequestType.ToString() == "Sorting" && args.ColumnName == "CustomerID") 
        { 
            await Task.Delay(200); 
            //Now sorting the “CustomerID” column will automatically sort the “Orderdate” column also. 
            GridInstance.SortColumn("OrderDate", SortDirection.Ascending, true);     
        } 
    } 
    ... 
} 


We have also prepared a sample based on this requirement. Please download the sample from the link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


PE PeterHup October 16, 2019 07:21 PM UTC

I guess I oversimplified my example.

I have a column where I want to have a display value and a sort by expression

So to further my example, I click the column Client and sort by ActiveClient, ClientName, Order date, Order Status, Order amount etc.  I basically want control over how that column is ordered and how it is displayed.

Also, your example gives me circles with arrows on the header which was confusing even for me, the developer.

RS Renjith Singh Rajendran Syncfusion Team October 17, 2019 01:51 PM UTC

Hi PeterHup, 

In our previous response, we have provided the sample with MultiSorting enabled. When the “CustomerID” column is sorted manually, it will automatically sort(by using the SortColumn method) the “OrderDate” column. Now two columns will be sorted in Grid, so based on the default behavior of “Multi-Sorting feature” when more than one column gets sorted then the numbers will be displayed to indicate which column is sorted first and second. 
 
We have analyzed your query. And we suspect that, you don’t want the icons to get displayed for the other sorted columns. To achieve this, we suggest you to set the “CustomAttributes” for the corresponding columns, and hide the icons. We have modified the sample based on this requirement. Please download the sample from the link below, 
 
In the below code, when sort the “CustomerID” column, it will automatically sort the “OrderDate” and “OrderID” columns. And the icons will be hidden. Please refer the codes below, 

 
<style> 
    .e-grid .e-hidemultisort .e-sortnumber { 
        display:none;                          /*Hide the circled sorting order number*/ 
    } 
    .e-grid .e-hidemultisort .e-sortfilterdiv.e-icons { 
        display:none;                          /*Hide the circled sorting arrow icon*/ 
    } 
    .e-grid .e-hidefirstsort .e-sortnumber { 
        display:none;                          /*Hide the circled sorting order number for the first sorted column*/ 
    } 
</style> 
 
    <EjsGrid @ref="GridInstance" DataSource="@Orders" AllowSorting="true" AllowMultiSorting="true"  AllowPaging="true"> 
        <GridEvents OnActionComplete="OnActionComplete" TValue="Order"></GridEvents> 
        <GridColumns> 
            <GridColumn Field=@nameof(Order.OrderID) CustomAttributes="@(new { @class="e-hidemultisort"})" ...></GridColumn> 
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        </GridColumns> 
    </EjsGrid> 
 
    @code{ 
        EjsGrid<Order> GridInstance; 
        ... 
       public async void OnActionComplete(ActionEventArgs<Order> args)                /*OnActionComplete will be triggered for each sort action*/ 
        { 
            if(args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Sorting && args.ColumnName == "CustomerID") 
            { 
                await Task.Delay(200); 
                GridInstance.SortColumn("OrderDate", SortDirection.Ascending, true);      /*Sort OrderDate column*/ 
            } 
            else if(args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Sorting && args.ColumnName == "OrderDate") 
            { 
                await Task.Delay(200); 
                GridInstance.SortColumn("OrderID", SortDirection.Ascending, true);       /*Sort OrderID column*/ 
            } 
        } 
        ... 
   } 


If we have misunderstood your query, kindly share with us the following details for better assistance. 
  1. Video demo explaining your requirement.
  2. Share a detailed explanation of your complete requirement.

The provided information will help us analyze your requirement, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Live Chat Icon For mobile
Up arrow icon