Sorting in RadzenDataGrid

Radzen.Blazor Components
1

Hi,

I'm creating a RadzenDataGrid with Sort on some columns. For the first click for Sort the column, the SortOrder was Ascending. The second click, the SortOrder change to Descending. On the third click, the SortOrder change back to Ascending. But on the fourth click, the SortOrder still as Ascending. Any advice for this?

Here my code:

RadzenDataGrid EmptyText="Data Not Found." AllowAlternatingRows="false" AllowSorting="true" PageSize="10" AllowPaging="false" PagerHorizontalAlign="HorizontalAlign.Center"
                            ShowPagingSummary="false" Data="@project" Sort="@OnSort" TItem="ListProjectResponse">
                    <Columns>
                        <RadzenDataGridColumn Property="@nameof(ListProjectResponse.ProjectName)" Title="Project" Width="222px" Frozen="true" Filterable="false" TextAlign="TextAlign.Left">
                            <Template Context="data">
                                <span style="font-weight:600">@data.ProjectName</span>                               
                            </Template>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Property="@nameof(ListProjectResponse.Address)" Title="Alamat" Width="342px" Filterable="false" Sortable="false" />
                        <RadzenDataGridColumn Property="@nameof(ListProjectResponse.ProjectDate)" Title="Tanggal Project" Width="168px" Filterable="false" Sortable="true" />
                        <RadzenDataGridColumn Property="@nameof(ListProjectResponse.TotalBuy)" Title="Total Pembelian" Width="168px" Filterable="false" Sortable="true" />
                        <RadzenDataGridColumn Property="@nameof(ListProjectResponse.Status)" Title="Status" Width="182px" Filterable="false" Sortable="false">
                            <Template Context="data">
                                <div class="@ClassForStatus(data.Status);">
                                    @{
                                        if (data.Status == "projectonreview")
                                        {
                                            <span>
                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M8 6V8.5M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 10.5H8.005V10.505H8V10.5Z" stroke="#734011" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            </span>
                                        }
                                    }
                                    @data.StatusDeskripsi
                                </div>
                            </Template>
                        </RadzenDataGridColumn>
                        <RadzenDataGridColumn Width="104px" Filterable="false" Sortable="false">
                            <Template Context="data">
                                <span @onclick="TestOnClick" class='txt-primary pointer'>Detail</span>
                            </Template>
                        </RadzenDataGridColumn>
                    </Columns>
                </RadzenDataGrid>

And here the code to read the Sort:

async void OnSort(DataGridColumnSortEventArgs<ListProjectResponse> args)
{
    SelectedPage = 1;
    SortGrid = args.Column.Property + (args.SortOrder.ToString() == "Ascending" ? "Asc" : "Desc");
    
    await GetListProject();
}

Regards,

2

As far as I understand you are updating the DataGrid Data in Sort event - it will be better to use LoadData for that. Check our demos for reference:

3

Actually, I need the type of current Sort Order. Because I should send the Sort Order itu the API to generate the data.

After the third clicked on the column header, the Sort Order only shows as Ascending. Never change to Descending.

image
image1515×412 45.6 KB

4

Check the demo I've linked - it's exactly what should be used to apply sorting and call external API.