如何在Blazor Server的Radzen Grid中添加列可见性选择器

实现步骤 #

1. 定义列可见性状态变量 #

在@code块中添加布尔变量，对应每个需要控制可见性的列（Edit列固定显示，无需加入控制）：

// 列可见性状态
private bool showApplicationId = false; // 默认隐藏，与原代码保持一致
private bool showApplicationName = true;
private bool showCommonName = true;
private bool showTypeOfApplication = true;

2. 集成Radzen.GridColumnVisibilityChooser组件 #

在RadzenGrid内部添加列选择器组件，配合Toolbar按钮触发弹窗：

<RadzenGrid AllowPaging="true" PageSize=@pageSize AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowSorting="true"
            data="@AllApplicationsList"
            IsLoading="@isLoading"
            TItem="ApplicationValuesDto">
    <!-- 工具栏：放置列选择按钮 -->
    <ToolbarTemplate>
        <RadzenButton Text="选择列" Click="@(() => columnChooser.ToggleVisible())" />
    </ToolbarTemplate>

    <!-- 列可见性选择器 -->
    <RadzenGridColumnVisibilityChooser @ref="columnChooser" TItem="ApplicationValuesDto">
        <Columns>
            <RadzenGridColumnVisibilityColumn Text="Application ID" Value="@nameof(ApplicationValuesDto.applicationId)" />
            <RadzenGridColumnVisibilityColumn Text="Application Name" Value="@nameof(ApplicationValuesDto.applicationName)" />
            <RadzenGridColumnVisibilityColumn Text="Common Name" Value="@nameof(ApplicationValuesDto.commonName)" />
            <RadzenGridColumnVisibilityColumn Text="Type Of Application" Value="@nameof(ApplicationValuesDto.typeOfApplication)" />
        </Columns>
    </RadzenGridColumnVisibilityChooser>

    <!-- 原有列定义：修改Visible属性绑定到状态变量 -->
    <Columns>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="applicationId" Title="Application ID" Visible="@showApplicationId"></RadzenGridColumn>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="applicationName" Title="Application Name" Visible="@showApplicationName"></RadzenGridColumn>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="commonName" Title="Common Name" Visible="@showCommonName"></RadzenGridColumn>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="typeOfApplication" Title="Type Of Application" Visible="@showTypeOfApplication"></RadzenGridColumn>
      
        <RadzenGridColumn TItem="ApplicationValuesDto" Title="Edit" Visible="true">
            <Template Context="d">
                <button type="button" @onclick="(()=> NavigateToEditApplication(d.applicationId))">
                    <img src="../assets/img/imageresize.png" />
                </button>
            </Template>
        </RadzenGridColumn>
    </Columns>
</RadzenGrid>

3. 添加组件引用与状态同步 #

在@code块中获取选择器引用，监听可见性变化事件并同步状态：

// 列选择器组件引用
private RadzenGridColumnVisibilityChooser<ApplicationValuesDto> columnChooser;

protected override void OnInitialized()
{
    // 监听列可见性变更，同步到本地状态变量
    columnChooser.VisibilityChanged += (sender, args) =>
    {
        switch (args.Property)
        {
            case nameof(ApplicationValuesDto.applicationId):
                showApplicationId = args.Visible;
                break;
            case nameof(ApplicationValuesDto.applicationName):
                showApplicationName = args.Visible;
                break;
            case nameof(ApplicationValuesDto.commonName):
                showCommonName = args.Visible;
                break;
            case nameof(ApplicationValuesDto.typeOfApplication):
                showTypeOfApplication = args.Visible;
                break;
        }
        StateHasChanged(); // 通知组件更新UI
    };
}

4. 完整整合代码 #

将原有数据逻辑与新功能整合后的完整代码如下：

@* 页面其他内容 *@

<RadzenGrid AllowPaging="true" PageSize=@pageSize AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowSorting="true"
            data="@AllApplicationsList"
            IsLoading="@isLoading"
            TItem="ApplicationValuesDto">
    <ToolbarTemplate>
        <RadzenButton Text="选择列" Click="@(() => columnChooser.ToggleVisible())" />
    </ToolbarTemplate>

    <RadzenGridColumnVisibilityChooser @ref="columnChooser" TItem="ApplicationValuesDto">
        <Columns>
            <RadzenGridColumnVisibilityColumn Text="Application ID" Value="@nameof(ApplicationValuesDto.applicationId)" />
            <RadzenGridColumnVisibilityColumn Text="Application Name" Value="@nameof(ApplicationValuesDto.applicationName)" />
            <RadzenGridColumnVisibilityColumn Text="Common Name" Value="@nameof(ApplicationValuesDto.commonName)" />
            <RadzenGridColumnVisibilityColumn Text="Type Of Application" Value="@nameof(ApplicationValuesDto.typeOfApplication)" />
        </Columns>
    </RadzenGridColumnVisibilityChooser>

    <Columns>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="applicationId" Title="Application ID" Visible="@showApplicationId"></RadzenGridColumn>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="applicationName" Title="Application Name" Visible="@showApplicationName"></RadzenGridColumn>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="commonName" Title="Common Name" Visible="@showCommonName"></RadzenGridColumn>
        <RadzenGridColumn TItem="ApplicationValuesDto" Property="typeOfApplication" Title="Type Of Application" Visible="@showTypeOfApplication"></RadzenGridColumn>
      
        <RadzenGridColumn TItem="ApplicationValuesDto" Title="Edit" Visible="true">
            <Template Context="d">
                <button type="button" @onclick="(()=> NavigateToEditApplication(d.applicationId))">
                    <img src="../assets/img/imageresize.png" />
                </button>
            </Template>
        </RadzenGridColumn>
    </Columns>
</RadzenGrid>

@code {
    private IEnumerable<ApplicationValuesDto> AllApplicationsList = Array.Empty<ApplicationValuesDto>();
    private bool isLoading;
    private int pageSize = 10;
    private RadzenGridColumnVisibilityChooser<ApplicationValuesDto> columnChooser;

    // 列可见性状态
    private bool showApplicationId = false;
    private bool showApplicationName = true;
    private bool showCommonName = true;
    private bool showTypeOfApplication = true;

    public class ApplicationValuesDto
    {
        public int applicationId { get; set; }
        public string applicationName { get; set; }
        public string commonName { get; set; }
        public string typeOfApplication { get; set; }
    }

    private async Task SearchFilter()
    {
        isLoading = true;
        var request = new HttpRequestMessage(HttpMethod.Get, config["API_URL"] + "Application/SearchFullDataLike/" + appfilter.server_Name + "/" + appfilter.databaseName + "/" + appfilter.ownerName);
        var client = ClientFactory.CreateClient();
        var response = await client.SendAsync(request);
        using var responsestream = await response.Content.ReadAsStreamAsync();
        AllApplicationsList = await JsonSerializer.DeserializeAsync<List<ApplicationValuesDto>>(responsestream);
        isLoading = false;
    }

    protected override async Task OnInitializedAsync()
    {
        await SearchFilter();
    }

    protected override void OnInitialized()
    {
        columnChooser.VisibilityChanged += (sender, args) =>
        {
            switch (args.Property)
            {
                case nameof(ApplicationValuesDto.applicationId):
                    showApplicationId = args.Visible;
                    break;
                case nameof(ApplicationValuesDto.applicationName):
                    showApplicationName = args.Visible;
                    break;
                case nameof(ApplicationValuesDto.commonName):
                    showCommonName = args.Visible;
                    break;
                case nameof(ApplicationValuesDto.typeOfApplication):
                    showTypeOfApplication = args.Visible;
                    break;
            }
            StateHasChanged();
        };
    }

    private void NavigateToEditApplication(int appId)
    {
        // 自定义导航逻辑
    }
}

关键说明 #

• 通过@ref获取RadzenGridColumnVisibilityChooser引用，调用ToggleVisible()触发选择弹窗
• RadzenGridColumnVisibilityColumn的Value需与对应列的Property名称完全匹配
• 监听VisibilityChanged事件，将选择器的状态同步到列的Visible绑定变量
• Edit列设置Visible="true"固定显示，不加入选择器选项

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