如何保存RadzenGrid调整后的列宽并在切换分页后保持生效

解决方案 #

你遇到的两个问题根源一致：RadzenGrid默认的列宽调整仅作用于当前渲染的DOM节点，切换分页时网格会重新渲染，未被持久化的列宽配置就会重置，同时也不会跨分页生效，按以下步骤修改即可解决：

1. 定义列宽存储容器

在页面的@code块中新增字典用于存储各列的宽度配置，键用列的Property属性作为唯一标识：

// 存储列宽，key为列的Property值，value为宽度值
private Dictionary<string, string> _columnWidths = new();

2. 绑定列宽调整事件与列宽属性

给RadzenGrid新增ColumnResized事件监听，同时将所有RadzenGridColumn的Width属性绑定到你定义的字典上：

<RadzenGrid 
    AllowPaging="true" 
    AllowSorting="true" 
    AllowColumnResize="true" 
    Data="@Data" 
    TItem="ArticleVariantListModel"
    RowSelect="@SelectRow"
    ColumnResized="@OnColumnResized"> <!-- 新增列宽调整事件 -->
    <Columns>
        <RadzenGridColumn TItem="ArticleVariantListModel" Property="Id" Title="Id" 
            Width="@(_columnWidths.TryGetValue("Id", out var w) ? w : "70px")" />
        <RadzenGridColumn TItem="ArticleVariantListModel" Property="Name" Title="@Language.Name" 
            Width="@(_columnWidths.TryGetValue("Name", out var w1) ? w1 : "auto")" />
        <RadzenGridColumn TItem="ArticleVariantListModel" Property="Index" Title="@Language.Index" 
            Width="@(_columnWidths.TryGetValue("Index", out var w2) ? w2 : "auto")" />
        <!-- 其余所有列都按照以上规则绑定Width属性，默认值填你原来设置的宽度即可 -->
    </Columns>
</RadzenGrid>

3. 实现列宽调整事件处理方法

在@code块中实现OnColumnResized方法，将用户调整后的宽度存入字典：

private void OnColumnResized(ColumnResizeEventArgs<ArticleVariantListModel> args)
{
    var columnProp = args.Column.Property;
    if (string.IsNullOrEmpty(columnProp)) return;
    // 保存调整后的宽度
    _columnWidths[columnProp] = $"{args.Width}px";

    // 如果需要实现用户下次打开页面仍保留调整后的列宽，可在此处将_columnWidths序列化后存入浏览器localStorage
    // 页面初始化时OnInitializedAsync方法中读取localStorage中的配置反序列化到_columnWidths即可
}

修改完成后，列宽会存储在组件的状态中，切换分页时网格重新渲染会读取字典中存储的宽度值，既可以保证所有分页的列宽一致，也不会出现切页后列宽重置的问题。

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