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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148337 Oct 15,2019 10:28 PM UTC Oct 17,2019 01:51 PM UTC Blazor 3
loading
Tags: Grid
PeterHup
Asked On October 15, 2019 10:28 PM UTC

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?

Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


PeterHup
Replied On 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.

Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon