Blazor Radzen filtering and sorting not working/interacting

Question

Have a very weird issue, I have a basic web app set up using blazor and radzen that retrieves data from Mssql, and displays it.

Problem is with filtering and sorting. By simply putting the Allow Filter and allow sorting tags, the options pop up on the page, but they do not work. By not work I mean that I cant even interact with the options.

So I tried to do it another way by adding a simple filtering method:

Which is based off of blazors guides. And I cant even interact with the drop down menu for the 'And' box.

What could cause such a issue? I don't see anything in the logs about javascript or similar issues.

Any suggestions?

The code:

@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>

<div style="display: flex; align-items: center; margin-bottom: 16px">
    <div style="white-space:nowrap; margin-right: 16px">Logical filter operator:</div>
    <RadzenDropDown @bind-Value="@logicalFilterOperator" TextProperty="Text" ValueProperty="Value" Change=@(args => grid.Reload())
                    Data="@(Enum.GetValues(typeof(Radzen.LogicalFilterOperator)).Cast<Radzen.LogicalFilterOperator>().Select(t => new { Text = $"{t}", Value = t }))" />
    <div style="white-space:nowrap; margin-left: 16px;margin-right: 16px">Filter case sensitivity:</div>
    <RadzenDropDown @bind-Value="@filterCaseSensitivity" TextProperty="Text" ValueProperty="Value" Change=@(args => grid.Reload())
                    Data="@(Enum.GetValues(typeof(Radzen.FilterCaseSensitivity)).Cast<Radzen.FilterCaseSensitivity>().Select(t => new { Text = $"{t}", Value = t }))" />
</div>
<RadzenDataGrid TItem="EMIR_AssementResults" Data="@notificationData" AllowFiltering="true" AllowSorting="true" AllowColumnResize="true" FilterMode="Radzen.FilterMode.Simple" @ref="grid"
                FilterCaseSensitivity="@filterCaseSensitivity" LogicalFilterOperator="@logicalFilterOperator">
    <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">
            <Template Context="data">
                @if (data.EntityResponsibleForReportingLEI != "F3JS33DEI6XQ4ZBPTN86")
                {
                    <span>No</span>
                }
                else if (string.IsNullOrWhiteSpace(data.EntityResponsibleForReportingLEI))
                {
                    <span>No Value</span>
                }
                else
                {
                    <span>Yes</span>
                }
            </Template>
        </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();

    }

}

Answer 1

The answer, in case anyone else comes across this, is that 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.

This means that you must select a type of interactivity in the pages, such as InteractiveServer or InteractiveWebAssembly or InteractiveAuto in case of inherited parent interactivity, otherwise no Blazor event will work.

E.g.: @rendermode InteractiveServer