Filter grid by URL parameter

Radzen.Blazor Components
1

Hi there, been using Radzen for a while, love it so far! I'm trying to do something simple at the moment where I want to set a parameter in the URL and the code will grab that and filter a column by it, at the moment it only half works, I can see the number appears in the filter entry, but the grid does not filter by it.

image

If I focus on the filter box and press enter it still doesnt work.
If I press the Refresh button (which does grid.Reload()) then it does the filtering as desired.

What I would like to happen is as soon as the page loads the grid has already filtered by the URL paramater requiring no input from the user.

The code of interest is this:
var uri = nav.ToAbsoluteUri(nav.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("company_id", out var companyIdFilter);
bool companyIdValid = int.TryParse(companyIdFilter, out var companyIdFilterValue);

@if (companyIdValid)
{
    <button class="btn btn-primary btn-sm" @onclick="@(() => { nav.NavigateTo("users"); })">Clear Filter</button>
}

<RadzenGrid @ref="grid0"
    AllowFiltering="true" FilterMode="FilterMode.Simple"
    AllowPaging="true" PageSize="20" AllowSorting="true"
    AllowColumnResize="true"
    Data="@gridData" TItem="User">
    <Columns>
        <RadzenGridColumn TItem="User" Property="Id" Title="Id" />
        <RadzenGridColumn TItem="User" Property="CompanyId" Title="CompanyId" FilterValue="companyIdValid ? companyIdFilterValue : null" />
        ...

Appreciate any help!

2 Likes
2

I've found a way to do it for now, let me know if there is a better way:

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        Refresh();
    }
}
3

Now I've encountered a problem with the clear filter button, this is what I have now, when pressed the button disappears, but the grid doesn't change until I manually click the Refresh button, which is strange because I have the call to refresh in the Clear Filter button press onclick.

@if (companyIdValid)
{
    <button class="btn btn-primary btn-sm" @onclick="@(() => { companyIdValid = false; companyIdFilterValue = 0; nav.NavigateTo("users"); Refresh(); })">Clear Filter</button>
}
...
<RadzenGridColumn TItem="User" Property="CompanyId" Title="CompanyId" FilterValue="@(companyIdValid ? companyIdFilterValue : null)" />
4

My current fix for clearing the filter is redirecting to the same page without the URL parameter and forcing reload was necessary to make this work.

navigationManager.NavigateTo(navigationManager.Uri.Substring(0, navigationManager.Uri.IndexOf('?')), true);
5

Hi @Joel,

I think you already did what you need. Why don't you try to refresh the grid (grid0.Refresh(); ) after you set the filter value.

Another approach can be refreshing (requery) the variable assigned to your grid.

I hope this can help you.
KB