Blazor中Telerik Grid数据填充完成是否有回调方法？

你遇到的问题根源是：OnAfterRender触发时，Grid的数据虽然已经绑定，但内部DOM渲染还未完成，导致打印时Grid为空。以下是几种可靠的解决方法：

方法1：数据加载标记 + JS监听Grid DOM渲染完成 #

通过标记位记录数据加载状态，结合JS等待Grid内容渲染到DOM后再触发打印：

组件代码 #

<TelerikGrid @ref="_gridRef" Data="@GridData" Pageable="true">
    <!-- 自定义列定义 -->
    <GridColumns>
        <GridColumn Field="@nameof(MyModel.Id)" Title="ID" />
        <GridColumn Field="@nameof(MyModel.Name)" Title="名称" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<MyModel> GridData { get; set; } = new();
    private ElementReference _gridRef;
    private bool _dataLoaded = false;
    private bool _printTriggered = false;

    protected override async Task OnInitializedAsync()
    {
        // 调用REST API获取数据
        GridData = await MyDataApi.FetchGridDataAsync();
        _dataLoaded = true;
        // 通知组件重新渲染
        await InvokeAsync(StateHasChanged);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (_dataLoaded && !_printTriggered)
        {
            _printTriggered = true;
            // 等待Grid内容渲染到DOM
            await JSRuntime.InvokeAsync<bool>("waitForGridContent", _gridRef);
            // 触发打印
            await JSRuntime.InvokeVoidAsync("window.print");
        }
    }

    // 示例数据模型
    public class MyModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

辅助JS代码（添加到wwwroot/js/site.js） #

function waitForGridContent(gridElement) {
    return new Promise(resolve => {
        const checkContent = () => {
            const contentArea = gridElement.querySelector('.k-grid-content');
            // 检查Grid内容区域是否有数据行
            if (contentArea && contentArea.querySelectorAll('tr').length > 0) {
                resolve(true);
            } else {
                // 每50ms检查一次，直到内容加载完成
                setTimeout(checkContent, 50);
            }
        };
        checkContent();
    });
}

方法2：服务器端绑定场景（OnRead事件） #

如果Grid使用服务器端分页/过滤（通过OnRead事件加载数据），可以在数据返回后触发打印：

<TelerikGrid Data="@GridData" OnRead="@HandleGridRead" Pageable="true">
    <GridColumns>
        <GridColumn Field="@nameof(MyModel.Id)" Title="ID" />
        <GridColumn Field="@nameof(MyModel.Name)" Title="名称" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<MyModel> GridData { get; set; } = new();
    private bool _printAfterFirstLoad = false;

    private async Task HandleGridRead(GridReadEventArgs args)
    {
        // 调用API获取分页数据
        var apiResult = await MyDataApi.FetchPaginatedDataAsync(args.Request);
        GridData = apiResult.Data;
        args.Total = apiResult.TotalCount;

        // 首次加载完成后触发打印
        if (!_printAfterFirstLoad)
        {
            _printAfterFirstLoad = true;
            // 短延迟确保Grid完成DOM渲染
            await Task.Delay(100);
            await JSRuntime.InvokeVoidAsync("window.print");
        }
    }

    public class MyModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

核心注意事项 #

• 必须使用_printTriggered这类标记位，避免每次组件渲染都重复触发打印
• 不要依赖firstRender：API请求是异步的，数据加载可能在非首次渲染周期完成
• JS监听是最可靠的方式：Blazor渲染和DOM更新异步执行，C#代码无法直接感知Grid内部的渲染完成时机

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