DataGrid Paging Looks Correct but is Not Functional

Radzen.Blazor Components
1

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 custom loading, just get all the data and have it.

This is .Net 8 - Blazor Server. Radzen was updated to 4.28.9 today just to be sure that was not the issue.

Here is the search form to enter data:

<EditForm Model="SearchModel" FormName="search" OnValidSubmit="GatherResults">
  ... Many input fields
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 mb-2">
      <label for="street" class="form-label">Street:</label>
      <InputText id="street" @bind-Value="SearchModel.Street" class="form-control form-control-sm" />
    </div>
  </div>

  <div class="row mb-2">
    <div class="col text-center mt-2">
      <button id="btnSearch"
              type="submit"
              class="btn btn-sm btn-outline-primary">
        Search
      </button>
      <button id="btnClear"
              type="reset"
              class="btn btn-sm btn-outline-secondary mx-3"
              @onclick="ResetForm">
        Clear Form
      </button>
      <button type="button"
              class="btn btn-sm btn-outline-secondary"
              @onclick="ResetFormAndResults">
        Clear Form and Results
      </button>
    </div>
  </div>
</EditForm>

Here is the actual Radzen grid code:

<RadzenDataGrid AllowPaging="true"
                PageSize="10"
                ShowPagingSummary="true"
                TItem="SearchResultModel"
                Data="@Records">
  <Columns>
    <RadzenDataGridColumn TItem="SearchResultModel" Filterable="false" Sortable="false" CssClass="text-center" Width="40px">
      <Template Context="record">
        <NavLink class="" href="@($"edit/{@record.Id}")">
          @if (CanEdit)
          {
            <Icon Name="IconNames.Edit" height="16" />
          }
          else
          {
            <Icon Name="IconNames.View" height="16" />
          }
        </NavLink>
      </Template>
    </RadzenDataGridColumn>
    <RadzenDataGridColumn TItem="SearchResultModel" Property="County" Title="County" />
    <RadzenDataGridColumn TItem="SearchResultModel" Property="Description" Title="Description" />
    <RadzenDataGridColumn TItem="SearchResultModel" Filterable="false" Sortable="false" CssClass="text-center" Width="40px">
      <Template Context="record">
        @if (!string.IsNullOrWhiteSpace(record.FullPath))
        {
          <a href="@($"{BlobBasePath}/user-plats/{record.FullPath}")" target="download" class="text-primary">
            <Icon Name="IconNames.Download" height="16" Title="@($"Click here to download this file:\n {record.ImageFileName}")" />
          </a>
        }
      </Template>
    </RadzenDataGridColumn>
  </Columns>
</RadzenDataGrid>

And here is the backend code.

[Authorize]
[StreamRendering]
public partial class Search {

  [Inject]
  public IRecordService recordService { get; set; }

  [SupplyParameterFromForm]
  public SearchModel? SearchModel { get; set; }

  public IEnumerable<SearchResultModel> Records { get; set; } = [];

  protected override async Task OnInitializedAsync()
  {
    SearchModel ??= new();
  }

  public async Task GatherResults()
  {
    var result = await recordService.Search(SearchModel);

    if (result.WasSuccessful)
      Records = result.Result.AsEnumerable();
  }
}

The SearchResultModel is just a POCO class.

Do I need to do custom loading since this is Blazor Server?

2

It sounds as if interactivity is not enabled for this page. Are other event firing? For example sorting the grid or filtering?

3

No. They appear like they would, where the sort icons show up when I hover and such. But clicking does nothing there either.

4

Then that's it - you need to enable interactivity for that page.

1 Like
5

Yep, I added the @rendermode InteractiveAuto attribute to the page and that did the trick!

Thanks for your quick support @korchev