Multicolumn Sort while holding key

Radzen.Blazor Components
1

For multicolumn sort, I'd like the DataGrid to only add a sort column if the user is holding down CTRL or SHIFT while clicking a column. If clicking a column without holding down CTRL/SHIFT, it clears the sorts and begins sorting on that column.

2

I’m afraid that such feature is not supported.

3

I'd like to request this as a feature. Clicking multiple columns to toggle through ascending/descending/none is a tedious user experience.

I was thinking a property on DataGrid like SortMode=SortMode.SingleColumn, MultipleColumns, MultipleColumnsWithKey.

I found a work around by setting AllowMultiColumnSorting in onmousedown. Its pretty fragile because any mouse down in the datagrid is changing AllowMultiColumnSorting.


<RadzenExample Name="DataGrid" Source="DataGridMultipleSort" Heading="false">
    <RadzenDataGrid PageSize="5" 
                    AllowMultiColumnSorting="@allowMultiColumnSorting" 
                    @onmousedown=@((args) => allowMultiColumnSorting = args.ShiftKey || args.CtrlKey)
                    AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="400px">
        <Columns>
            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
        </Columns>
    </RadzenDataGrid>
</RadzenExample>
@code {
    IEnumerable<Employee> employees;

    bool allowMultiColumnSorting { get; set; }

    protected override void OnInitialized()
    {
        employees = dbContext.Employees;
    }
}
4

Maybe if you define HeaderTemplate for the columns you can avoid global mouse event for the entire grid.

5

image
The header template doesn't cover the sort icon

6

Here is an example how to handle this easily using Blazor JS interop:

    <RadzenDataGrid PageSize="5" AllowMultiColumnSorting="@allowMultiColumnSorting" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" 
        ColumnWidth="400px" onmousedown="canMultiColumnSort(event, this)">
        <Columns>
            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" Width="150px" />
            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
        </Columns>
    </RadzenDataGrid>
@code {
    IEnumerable<Employee> employees;

    static bool allowMultiColumnSorting { get; set; }

    protected override void OnInitialized()
    {
        employees = dbContext.Employees;
    }

    [JSInvokable]
    public static void CanMultiColumnSort(bool value)
    {
       allowMultiColumnSorting = value;
    }
}

<script>
      window.canMultiColumnSort = (e, el) => {
        var header = el.getElementsByTagName('thead')[0];
        if(header.contains(e.target)) {
            DotNet.invokeMethodAsync('RadzenBlazorDemos', 'CanMultiColumnSort', e.ctrlKey || e.shiftKey);
        }
      };
</script>