Radzen data grid sorting/filtering functionality not working

[Arturs_Irbitis]

Hello everyone!
Hoping someone can point me in the right direction.

I've built a basic blazor page that uses radzen data grid to display data from SQL server database.
The data is displayed and all is good, but I need to add filtering and sorting to it. Which I did, using the AllowFilter=true settings.

The option to sort and filter now shows up on the page, but I cant interact with it, I click it, and nothing happens. I cant select any dates, cant even click on 'sort'.
Its like the interactivity doesnt exist. Let alone filtering.

Heres what it looks like:

And heres the code on the page:

@page "/assessmentresults"
@using NotificationGUI.Web.Components.Interfaces
@using Radzen.Blazor
@using NotificationGUI.Web.Components.DataModel.Schemas.Calc
@using Microsoft.EntityFrameworkCore
@using System.Linq
@using Microsoft.AspNetCore.Mvc;
@using BlazorDownloadFile;

@attribute [StreamRendering]
@inject EMIRAssessmentResultsDbContext dbContext

<PageTitle>Assessment Results</PageTitle>

<h1>Assessment Results</h1>

<RadzenDataGrid TItem="EMIR_AssementResults" Data="@notificationData" AllowFiltering="true" AllowSorting="true" AllowColumnResize="true" FilterMode="Radzen.FilterMode.Simple" @ref="grid"
                FilterCaseSensitivity="@filterCaseSensitivity" LogicalFilterOperator="Radzen.LogicalFilterOperator.Or" FilterPopupRenderMode="Radzen.PopupRenderMode.OnDemand">
    <Columns>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AssessmentDateTime" Title="Assessment Date Time" MinWidth="200px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="RBLKey" Title="RBL" MinWidth="50px"/>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AllThresholdsExceeded" Title="Notify NCA" MinWidth="100px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="EntityResponsibleForReportingLEI" Title="Notify ERR" MinWidth="230px">

        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="NumOfAffReports" Title="Num Of Aff Reports" MinWidth="150px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="ThresholdConstantX" Title="Threshold Constant X" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="ThersholdConstantY" Title="Threshold Constant Y" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AverageMontlyNum" Title="Average Montly Num" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="NumOfAffReports_AverageMontlyNum" Title="Calculated percentage" MinWidth="180px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="EntityResponsibleForReportingLEI" Title="ERRs" MinWidth="100px" />
    </Columns>
</RadzenDataGrid>

@code {

    List<EMIR_AssementResults> notificationData;
    RadzenDataGrid<EMIR_AssementResults> grid;

    Radzen.LogicalFilterOperator logicalFilterOperator = Radzen.LogicalFilterOperator.And;
    Radzen.FilterCaseSensitivity filterCaseSensitivity = Radzen.FilterCaseSensitivity.CaseInsensitive;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        // Retrieve data for RadzenDataGrid
        notificationData = await dbContext.EMIR_AssessmentResultsData.ToListAsync();
    }

}

Do I need to add more functionality somewhere for the filtering to work? I thought it was built-in, meaning we only need to declare the filter=true and thats it?

[enchev]

Most probably your case is similar:

DataGrid Paging Looks Correct but is Not Functional

I have a rather simple grid with at the moment 15 rows of data. The 10 rows (PageSize="10") are showing. The page summary shows that I am on page 1 of 2 with 15 items. The forward/backward and first/last page and numbered pages exist and are enabled/disabled correctly for page 1. But when I click on any of the buttons, nothing happens. No error. Nothing. The top of the page has numerous fields for the user to enter their search criteria in. The initial load works. I am not trying to do any custo…

[Arturs_Irbitis]

I guess its similar, but my application is server based - so I cant use the same solution.

But in my example, shouldnt there be some interactivity either way? E.g. when I click on the date filter, and try to click on a date in the box, nothing happens, it doesnt even select it.

[enchev]

If there is no interactivity selected (InteractiveServer or InteractiveWebAssembly or InteractiveAuto in case of inherited parent interactivity) no Blazor event will work.

[Arturs_Irbitis]

Aaaah! Right.
Okay, adding: @rendermode InteractiveServer fixed my issue.
Didnt realise this was a specific option.

Thanks for the help!

[korchev]

Unfortunately this is a common misunderstanding. The default Blazor template comes without interactivity enabled which leaves a lot of developers baffled (me included). Basic stuff such as button click event handler no longer works and there is no warning or exception.

[Grandizer]

My application IS server based.