更新Data属性后RadzenDataGrid无法重新加载的问题求助

核心问题：列定义组件标签错误 #

你的RadzenDataGrid列配置误用了<RadzenDataGrid>标签，正确的列组件应该是<RadzenDataGridColumn>。这个错误会导致网格无法正确识别列配置逻辑，即便数据已更新，UI也无法正常渲染内容。

修复步骤及完整代码 #

1. 修正列定义部分

将网格内的<RadzenDataGrid>标签替换为<RadzenDataGridColumn>：

<RadzenDataGrid @ref="fileGrid" Data=@Files PageSize="10">
    <Columns>
        <RadzenDataGridColumn TItem="IBrowserFile" Property="Name" Title="Name" />
        <RadzenDataGridColumn TItem="IBrowserFile" Property="Size" Title="Size" />
        <RadzenDataGridColumn TItem="IBrowserFile">
            <Template Context="item">
                <RadzenIcon class="action-icon float-right" Icon="delete_forever" @onclick="@(() => RemoveFile(item))" />
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

2. 优化数据绑定逻辑

将files字段改为自动属性（Blazor对属性的变更检测更灵敏），并同步更新绑定：

private List<IBrowserFile> Files { get; set; } = new();

3. 完整修复后代码

<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<div>
    <InputFile id="fileInput" class="hidden" accept="@Accept" OnChange="HandleFileChange" multiple />
    <RadzenText TextStyle="TextStyle.Overline">@Text</RadzenText>
    <label for="fileInput">
        <span class="btn material-symbols-outlined">
            Add
        </span>
    </label>
    <RadzenDataGrid @ref="fileGrid" Data=@Files PageSize="10">
        <Columns>
            <RadzenDataGridColumn TItem="IBrowserFile" Property="Name" Title="Name" />
            <RadzenDataGridColumn TItem="IBrowserFile" Property="Size" Title="Size" />
            <RadzenDataGridColumn TItem="IBrowserFile">
                <Template Context="item">
                    <RadzenIcon class="action-icon float-right" Icon="delete_forever" @onclick="@(() => RemoveFile(item))" />
                </Template>
            </RadzenDataGridColumn>
        </Columns>
    </RadzenDataGrid>
</div>
<Toast @ref="toast" />

<style>
    .hidden {
        display: none;
    }

    .btn {
        cursor: pointer;
        padding: 0;
        margin: 0;
    }
</style>

@code {
    [Parameter]
    public string Accept { get; set; } = "*";

    [Parameter]
    public string Text { get; set; } = "Files";

    [Parameter]
    public EventCallback<List<IBrowserFile>> FilesChanged { get; set; }

    private List<IBrowserFile> Files { get; set; } = new();
    Toast toast;
    RadzenDataGrid<IBrowserFile> fileGrid;

    const int maxFileSizeMb = 10;

    private async Task HandleFileChange(InputFileChangeEventArgs eventArgs)
    {
        List<IBrowserFile> validFiles = new();

        foreach (var file in eventArgs.GetMultipleFiles())
        {
            if (ValidateSize(file))
                validFiles.Add(file);
            else
                toast.Show($"{file.Name} exceeds the file limit of {maxFileSizeMb}mb");
        }

        // 若需要累积选中文件则用AddRange，若每次替换则保留Files = validFiles;
        Files.AddRange(validFiles);
        
        // 通知父组件同步文件列表
        await FilesChanged.InvokeAsync(Files);

        if (fileGrid != null)
        {
            await fileGrid.Reload();
        }
    }

    private bool ValidateSize(IBrowserFile file) => file.Size < maxFileSizeMb * 1024 * 1024;

    private void RemoveFile(IBrowserFile file)
    {
        Files.Remove(file);
        fileGrid?.Reload();
    }
}

验证说明 #

修正列标签后，网格会正确解析列配置，数据更新后调用fileGrid.Reload()即可触发UI渲染。同时将字段改为属性并添加FilesChanged回调，能确保父组件同步获取选中的文件列表。

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