Typing Delay with DataGrid String Filter

Radzen.Blazor Components
1

This is on the latest version of Radzen. This is a Blazor Wasm project on Dot Net 9.

Watch the video and notice the typing delay in a text field for filtering a table. You can see on my screen the key capturing showing up way before the text shows up. If I do it with a normal text field, it instantly shows up.

https://app.canvid.com/share/fi_01K472K4PJNR1MJACADBQSXEF6

I'm not sure what I am doing wrong. My "LoadData" doesn't trigger until the typing is completed.

RadzenDataGrid TItem="InventoryGroup" @ref="@_grid" Data="@Data" Count="@Count" LoadData="@LoadData"
                IsLoading="@IsLoading"
                AllowFiltering="true" AllowPaging="true" Responsive="true" AllowAlternatingRows="false"
                Density="Density.Compact"
                ShowPagingSummary="true" AllowSorting="true" AllowColumnPicking="true" PageSize="20"
                GotoFirstPageOnSort="true" FilterMode="FilterMode.Simple">
    <HeaderTemplate>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="8px"
                     Style="padding-right: 1rem;">
            <AuthorizeView Policy="@UserPolicy.InventoryGroupEdit">
                <RadzenButton Text="New" Icon="Add" Variant="Variant.Outlined" Click="@New"/>
            </AuthorizeView>
            <RadzenSplitButton Text="Refresh" Icon="Refresh" Variant="Variant.Outlined"
                               ButtonStyle="ButtonStyle.Secondary"
                               Click="@RefreshGridData">
                <ChildContent>
                    <RadzenSplitButtonItem Text="Reset" Value="Reset"/>
                </ChildContent>
            </RadzenSplitButton>
            <RadzenMenu Style="background-color: var(--rz-grid-header-background-color);">
                <RadzenMenuItem Icon="Settings" IconColor="@Colors.Secondary">
                    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem"
                                 class="rz-p-2">
                        <RadzenLabel Text="Include Archive" Component="ArchiveSwitch" Style="white-space: nowrap;"/>
                        <RadzenSwitch @bind-Value="@IncludeArchive" Name="ArchiveSwitch"/>
                    </RadzenStack>
                </RadzenMenuItem>
            </RadzenMenu>
        </RadzenStack>
    </HeaderTemplate>

    <Columns>
        <RadzenDataGridColumn Property="@nameof(InventoryGroup.Id)" Title="Id" Width="80px" Filterable="false"
                              Visible="false"/>

        <RadzenDataGridColumn Property="@nameof(InventoryGroup.Code)" Title="SKU" Width="80px"
                              Visible="true"/>

        @* Properties *@
        <RadzenDataGridColumnEnhanced Property="@nameof(InventoryGroup.Name)" Title="Name" TItem="InventoryGroup"
                                      LinkColor="@Colors.Primary"
                                      CustomHref=@NavigateToItem
                                      ImagePath="@(item => GetItemImage(item.ItemImage))"/>
        <RadzenDataGridColumn Property="@nameof(InventoryGroup.DisplayName)" Title="Display Name"/>
        <RadzenDataGridColumn Property="@nameof(InventoryGroup.Type)" Title="Type">
            <Template Context="data">
                <RadzenBadge BadgeStyle="BadgeStyle.Info" Text="@data.Type.ToString()"/>
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(InventoryGroup.Category)" Title="Category">
            <Template Context="data">
                <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text="@data.Category.ToString()"/>
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="DefaultVendor.Name" Title="Default Vendor"/>
        <RadzenDataGridColumn Property="DefaultManufacturer.Name" Title="Default Manufacturer"/>

        @* Tags *@
        <RadzenDataGridColumnTags AvailableTags="@_tags" Tags="@(data => data.Tags)"/>

        @* Entity Based Columns *@
        <RadzenDataGridColumnEnhanced Title="Last Modified" Property="LastModified" UseHumanizer="true"/>
        <RadzenDataGridColumnEnhanced Title="Created Date" Property="Created" Visible="false" UseHumanizer="true"/>
        <RadzenDataGridColumn Title="Last Modified By" Property="LastModifiedByName" Visible="false"/>

        @* Actions *@
        <RadzenDataGridColumn Context="data" Filterable="false" Sortable="false" Title="Action"
                              WhiteSpace="WhiteSpace.Wrap" Frozen="true" Width="100px"
                              TextAlign="TextAlign.Left" FrozenPosition="FrozenColumnPosition.Right">
            <Template Context="item">
                <RadzenButton Icon="more_horiz" IconColor="@Colors.Secondary" Variant="Variant.Text"
                              Click="@((args) => ShowContextMenu(args, item))"/>
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

@code {

    void ShowContextMenu(MouseEventArgs args, InventoryGroup data)
    {
        ContextMenuService.Open(args, ds => @<RadzenMenu>
                                                <RadzenMenuItem Icon="edit" Text="Open" Click="@(() => View(data))"/>
                                                <AuthorizeView Policy="@UserPolicy.InventoryGroupEdit">
                                                    <RadzenMenuItem Icon="@(data.IsArchived ? "Restore" : "Archive")"
                                                                    Text="@(data.IsArchived ? "Restore" : "Archive")"
                                                                    Click="@(() => Archive(data))"/>
                                                </AuthorizeView>
                                            </RadzenMenu>);
    }

}
2

What’s your app type? If it’s Blazor server this might be caused by the latency.

3

This is a Blazor Wasm Dot Net 9 application with an Web API backend.

4

In this case I don’t know what can cause this.

5

I ran into this problem as well, same “Blazor Wasm Dot Net 9 application with an Web API backend” app.

For anyone else seeing this, a workaround for me was reducing the page size from 100 to 20 (though I can see in the code from the original post that you already had PageSize set to 20). That that reduction worked implies to me that Blazor is trying to re-render the full grid on each keystroke.

1 Like