页面加载时如何将 MudBlazor DataGrid 滚动到底部？

Question

我有一个 MudBlazor DataGrid，需要从底部而不是从顶部滚动它。这意味着在页面加载时，滚动条需要位于底部。

我尝试了一些 javascript 互操作，但因为 muddatagrid 外部 div 本身不是滚动的，我不知道要在哪个元素上使用 JS 互操作。

https://mudblazor.com/api/datagrid#pages

<MudDataGrid id="workoutPickerGrid" Dense=true T="Workout" Items="@data.Workouts.MyWorkouts" Breakpoint="Breakpoint.None" Filterable="true" Virtualize="true" HeaderClass="d-none" Height="100%" Style="height:100%;" ShowColumnOptions="false">
    <ChildRowContent>
        <div class="d-flex justify-space-between align-center" @onclick=@(()=>navManager.NavigateTo($"/Workouts/View/{context.Item.ID}"))>
            <MudText Typo="Typo.subtitle2">@context.Item.Name</MudText>
            <MudText Typo="Typo.body2">@context.Item.StartedAt.GetTimeSinceString()</MudText>
        </div>
        <MudText Typo="Typo.body2">@context.Item.StartedAt.ToLongDateString()</MudText>
    </ChildRowContent>
</MudDataGrid>

<script>
    window.onload = function () {
        var objDiv = document.getElementById("workoutPickerGrid");
        objDiv.scrollTop = objDiv.scrollHeight;
    }
</script>

Answer 1

您可以使用

IScrollManager

，它提供了

ScrollToBottomAsync

方法。您需要为要滚动的元素确定一个选择器。对于数据网格，您可以使用表格容器。

注入 IScrollManager 后，您可以执行类似的操作

protected override async Task OnAfterRenderAsync(bool firstRender) 
{
    await ScrollManager.ScrollToBottomAsync(".mud-table-container", ScrollBehavior.Smooth);
}