How to: Implement Custom Sorting

Dec 17, 2020

The following example implements custom sorting. The “Country” column displays text values. When sorting is applied to this column, the cards are compared by the length of the “Country” column values.

Note that custom sorting must be enabled for the “Country” column (its GridDataColumnSettings.SortMode property is set to ‘Custom’).

The image below shows the result:

C#
ASPX

csharp

protected void CardView_CustomColumnSort(object sender, CardViewCustomColumnSortEventArgs e)
{
    if (e.Column.FieldName == "Country") {
        e.Handled = true;
        string s1 = e.Value1.ToString(), s2 = e.Value2.ToString();
        if (s1.Length > s2.Length)
            e.Result = 1;
        else
            if (s1.Length == s2.Length)
                e.Result = Comparer.Default.Compare(s1, s2);
            else
                e.Result = -1;
    }
}

aspx

<dx:ASPxCardView ID="CardView" runat="server" DataSourceID="CustomersDataSource" Width="100%" OnCustomColumnSort="CardView_CustomColumnSort">
    <Columns>
        <dx:CardViewColumn FieldName="ContactName" />
        <dx:CardViewColumn FieldName="CompanyName" />
        <dx:CardViewColumn FieldName="City" />
        <dx:CardViewColumn FieldName="Region" />
        <dx:CardViewColumn FieldName="Country" Settings-SortMode="Custom" />
    </Columns>
</dx:ASPxCardView>