DevExpress Blazor DxGrid中ShowFilterRow显示/隐藏按钮实现问题

要在分页控件附近添加按钮控制筛选行的显示/隐藏，同时避免InvalidOperationException，你需要通过自定义分页模板和正确的状态刷新方式来实现，具体步骤如下：

1. 绑定筛选行状态 #

在组件中定义布尔类型的私有字段，绑定到DxGrid的ShowFilterRow属性，用于控制筛选行的显示状态：

private bool _showFilterRow = true; // 默认显示筛选行

2. 自定义分页模板 #

使用DxGrid的PagerTemplate模板，将分页控件和自定义按钮放在一起，这样按钮就会出现在分页大小/页码选择器附近：

<DxGrid Data="@GridData" ShowFilterRow="@_showFilterRow">
    <!-- 你的列定义 -->
    <Columns>
        <DxGridDataColumn FieldName="Id" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="Price" />
    </Columns>

    <!-- 自定义分页区域，添加控制按钮 -->
    <PagerTemplate>
        <DxGridPager /> <!-- 保留默认分页控件 -->
        <DxButton 
            Click="@ToggleFilterRow" 
            Icon="@IconName.Filter" 
            Text="@(_showFilterRow ? "隐藏筛选行" : "显示筛选行")"
            Style="margin-left: 8px;" />
    </PagerTemplate>
</DxGrid>

3. 处理按钮点击并安全刷新状态 #

点击按钮时切换状态，必须调用InvokeAsync(StateHasChanged)确保组件在Blazor的渲染上下文内刷新，这是避免InvalidOperationException的关键：

private void ToggleFilterRow()
{
    _showFilterRow = !_showFilterRow;
    // 通知Blazor组件状态已变更，安全触发渲染
    InvokeAsync(StateHasChanged);
}

完整示例代码 #

@page "/grid-filter-toggle"

<DxGrid Data="@ProductData" ShowFilterRow="@_showFilterRow">
    <Columns>
        <DxGridDataColumn FieldName="Id" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="Price" DisplayFormat="C" />
        <DxGridDataColumn FieldName="InStock" />
    </Columns>

    <PagerTemplate>
        <DxGridPager PageSizeSelectorVisible="true" />
        <DxButton 
            Click="@ToggleFilterRow" 
            Icon="@IconName.Filter" 
            Text="@(_showFilterRow ? "隐藏筛选行" : "显示筛选行")"
            Style="margin-left: 12px;" />
    </PagerTemplate>
</DxGrid>

@code {
    private bool _showFilterRow = true;
    private List<Product> ProductData { get; set; } = new();

    protected override void OnInitialized()
    {
        // 模拟数据
        ProductData = Enumerable.Range(1, 60)
            .Select(i => new Product 
            { 
                Id = i, 
                ProductName = $"产品{i}", 
                Price = i * 15.99m, 
                InStock = i % 3 == 0 
            })
            .ToList();
    }

    private void ToggleFilterRow()
    {
        _showFilterRow = !_showFilterRow;
        InvokeAsync(StateHasChanged);
    }

    public class Product
    {
        public int Id { get; set; }
        public string ProductName { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public bool InStock { get; set; }
    }
}

异常原因说明 #

你之前遇到的InvalidOperationException，通常是因为在Blazor组件的渲染周期外直接修改状态，或者没有正确通知组件状态变更。使用InvokeAsync(StateHasChanged)可以确保状态修改在组件的同步上下文内执行，避免线程安全冲突和渲染异常。

内容的提问来源于stack exchange，提问作者sylwia