RadzenDataGrid Sorting Issues - Sort method parameter breaking sort and OrderBy not reordering table as expected #1044

Closed
opened 2026-01-29 17:48:13 +00:00 by claunia · 2 comments
Owner

Originally created by @evklein on GitHub (Nov 28, 2023).

Describe the bug
We have a table which periodically loads data from an API. This happens once on page load, and can also happen by a user triggering a reload without having the page refresh. When the Data gets refreshed, however the table was previously sorted gets reset, which as I understand from the documentation is supposed to be how this works. To counteract this and ensure that the previous sorting settings stay in place even after data is refreshed, I implemented some logic in the SetParametersAsync lifecycle hook. An example component that mirrors the one in our application looks like this:

<RadzenDataGrid Data=@Data
                    TItem=DataType
                    AllowSorting
                    Sort=@HandleOnSort
                    @ref=@dataGridRef
    >
        <Columns>
            <RadzenDataGridColumn TItem=DataType
                                  Property=@(nameof(DataType.StoredValue1))
                                  SortProperty=@(nameof(DataType.StoredValue1))
                                  Title="Value 1"
            >
                <Template Context="item">
                    @item.StoredValue1
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem=DataType
                                  Property=@(nameof(DataType.StoredValue2))
                                  SortProperty=@(nameof(DataType.StoredValue2))
                                  Title="Value 2"
            >
                <Template Context="item">
                    @item.StoredValue2
                </Template>
            </RadzenDataGridColumn>
            ...
</RadzenDataGrid>

@code
{
    [Parameter]
    public List<ProviderDistributionData> Data = new();

    private RadzenDataGrid<ProviderDistributionData>? dataGridRef;
    private string? _sortColumn = null;
    private SortOrder? _sortOrder = SortOrder.Ascending;

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        await base.SetParametersAsync(parameters);
       ...Other logic for setting parameters (including Data)

        if (_sortColumn is not null)
        {
            if (_sortOrder == SortOrder.Ascending)
            {
                providerDistributionGrid?.OrderBy(_sortColumn);
            }
            else
            {
                providerDistributionGrid?.OrderByDescending(_sortColumn);
            }
        }
    }

    private void HandleOnSort(DataGridColumnSortEventArgs<ProviderDistributionData> args)
    {
        if (args.SortOrder is not null)
        {
            _sortOrder = args.SortOrder;
        }

        _sortColumn = args.Column.Property;
    }
}

This does not work. Once Data is updated, the table again appears unsorted and all previous applied sort settings are wiped out. Furthermore, this logic seems to break sorting altogether. Clicking on the table headers no longer sorts by that row, as no sorting is applied. From further testing it appears to me that manually setting the Sort method parameter on the data grid is what breaks the sorting on the table, though I'm not sure how or why.

Expected behavior
I would expect the usage of OrderBy(columnName) (or OrderByDescending(columnName)) to order the table successfully when called after Data is updated. I also would expect that manually adding logic in the Sort method param would not actively break the sorting across the remainder of the table.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Chrome 119.0.6045.160 (Official Build) (64-bit)
  • Version 4.20.0
Originally created by @evklein on GitHub (Nov 28, 2023). **Describe the bug** We have a table which periodically loads data from an API. This happens once on page load, and can also happen by a user triggering a reload without having the page refresh. When the Data gets refreshed, however the table was previously sorted gets reset, which as I understand from the documentation is supposed to be how this works. To counteract this and ensure that the previous sorting settings stay in place even after data is refreshed, I implemented some logic in the `SetParametersAsync` lifecycle hook. An example component that mirrors the one in our application looks like this: ``` <RadzenDataGrid Data=@Data TItem=DataType AllowSorting Sort=@HandleOnSort @ref=@dataGridRef > <Columns> <RadzenDataGridColumn TItem=DataType Property=@(nameof(DataType.StoredValue1)) SortProperty=@(nameof(DataType.StoredValue1)) Title="Value 1" > <Template Context="item"> @item.StoredValue1 </Template> </RadzenDataGridColumn> <RadzenDataGridColumn TItem=DataType Property=@(nameof(DataType.StoredValue2)) SortProperty=@(nameof(DataType.StoredValue2)) Title="Value 2" > <Template Context="item"> @item.StoredValue2 </Template> </RadzenDataGridColumn> ... </RadzenDataGrid> @code { [Parameter] public List<ProviderDistributionData> Data = new(); private RadzenDataGrid<ProviderDistributionData>? dataGridRef; private string? _sortColumn = null; private SortOrder? _sortOrder = SortOrder.Ascending; public override async Task SetParametersAsync(ParameterView parameters) { await base.SetParametersAsync(parameters); ...Other logic for setting parameters (including Data) if (_sortColumn is not null) { if (_sortOrder == SortOrder.Ascending) { providerDistributionGrid?.OrderBy(_sortColumn); } else { providerDistributionGrid?.OrderByDescending(_sortColumn); } } } private void HandleOnSort(DataGridColumnSortEventArgs<ProviderDistributionData> args) { if (args.SortOrder is not null) { _sortOrder = args.SortOrder; } _sortColumn = args.Column.Property; } } ``` This does not work. Once `Data` is updated, the table again appears unsorted and all previous applied sort settings are wiped out. Furthermore, this logic seems to break sorting altogether. Clicking on the table headers no longer sorts by that row, as no sorting is applied. From further testing it appears to me that manually setting the `Sort` method parameter on the data grid is what breaks the sorting on the table, though I'm not sure how or why. **Expected behavior** I would expect the usage of `OrderBy(columnName)` (or `OrderByDescending(columnName)`) to order the table successfully when called after `Data` is updated. I also would expect that manually adding logic in the `Sort` method param would not actively break the sorting across the remainder of the table. **Desktop (please complete the following information):** - OS: **Windows 10** - Browser **Chrome 119.0.6045.160 (Official Build) (64-bit)** - Version 4.20.0
Author
Owner

@evklein commented on GitHub (Nov 28, 2023):

I also attempted to move the re-sort logic out of the SetParametersAsync and into the other lifecycle methods such as OnAfterRender, to test to see if the table was being re-ordered down the line. That did not seem to solve my issue.

@evklein commented on GitHub (Nov 28, 2023): I also attempted to move the re-sort logic out of the `SetParametersAsync` and into the other lifecycle methods such as `OnAfterRender`, to test to see if the table was being re-ordered down the line. That did not seem to solve my issue.
Author
Owner

@enchev commented on GitHub (Oct 24, 2024):

I'm unable to run the code provided to test the issue.

@enchev commented on GitHub (Oct 24, 2024): I'm unable to run the code provided to test the issue.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1044