2023年2月24日 02:28:34go评论73阅读模式

英文:

How to make MudBlazor MudDataGrid horizontal scroll available without having to vertical scroll to bottom of the MudDataGrid displayed rows first?

问题

在 MudBlazor MudDataGrid 中，水平滚动只有在使用垂直滚动将显示的行滚动到底部后才可用。然后，一旦水平滚动可用，用户必须向右滚动以显示所需的列，但然后用户需要垂直滚动回到他们最初需要查看的行。

如何使 MudBlazor MudDataGrid 中的水平滚动始终可用？

<MudDataGrid T="Repair"
             Items="@Page.Repairs"
             Sortable="true" SortMode="SortMode.Multiple" ColumnResizeMode="ResizeMode.Column"
             Filterable="false"
             Outlined="true"
             Loading="@Page.ProcessingSubmitQuery"
             RowsPerPage="10"
             Hover="true"
             QuickFilter="@QuickFilter">
    <ToolBarContent>
        <MudText Typo="Typo.body1" Class="mr-1">Job Number:</MudText><MudText Typo="Typo.h6" Class="mr-4">@Page.JobNumber</MudText>
        <MudText Typo="Typo.body1" Class="mr-1">Repair Code:</MudText><MudText Typo="Typo.h6" Class="mr-4">@Page.RepairCode</MudText>
        <MudText Typo="Typo.body1" Class="mr-1">Customer Id:</MudText><MudText Typo="Typo.h6" Class="mr-8">@Page.CustomerId</MudText>
        @*<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0" />*@
        <MudSpacer />
        <MudButton Class="ml-4" @onclick="ExportToExcelAsync" Color="Color.Primary" Variant="Variant.Outlined">Export to Excel</MudButton>
    </ToolBarContent>
    <Columns>
        <Column T="Repair" Field="Repair_Id" Sortable="true" Title="#" CellStyle="width: 10px">
            <CellTemplate>
                <MudLink Href="@GetRepairDetailPageLink(context.Repair_Id)" Target="_blank">
                    <MudText Style="color:darkblue">@context.Repair_ID</MudText>
                </MudLink>
            </CellTemplate>
        </Column>
        <Column T="Repair" Field="Mechanic" Sortable="true" Title="Mechanic" CellStyle="min-width: 10px" />
        <Column T="Repair" Field="Description" Sortable="false" Title="Description" CellStyle="min-width: 300px" />
        <Column T="Repair" Field="Repair" Sortable="false" Title="Repair Made" CellStyle="min-width: 200px" />       
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Repair" PageSizeOptions@(new int[] {10, 25, 50, 100, 150, 200 }) />
    </PagerContent>
</MudDataGrid>

英文:

In the MudBlazor MudDataGrid, the horizontal scroll is unavailable unless the vertical scroll is used to scroll to the bottom of the displayed rows in the MudDataGrid. Then once the horizontal scroll is available, the user must scroll to the right to expose the needed columns, but then the user needs to vertical scroll back up to the rows they needed to view to begin with.

How do I make the MudBlazor MudDataGrid horizontal scroll available all the time?

&lt;MudDataGrid T=&quot;Repair&quot;
Items=&quot;@Page.Repairs&quot;
Sortable=&quot;true&quot; SortMode=&quot;SortMode.Multiple&quot; ColumnResizeMode=&quot;ResizeMode.Column&quot;
Filterable=&quot;false&quot;
Outlined=&quot;true&quot;
Loading=&quot;Page.ProcessingSubmitQuery&quot;
RowsPerPage=&quot;10&quot;
Hover=&quot;true&quot;
QuickFilter=&quot;@QuickFilter&quot;&gt;
&lt;ToolBarContent&gt;
&lt;MudText Typo=&quot;Typo.body1&quot; Class=&quot;mr-1&quot;&gt;Job Number:&lt;/MudText&gt;&lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;mr-4&quot;&gt;@Page.JobNumber&lt;/MudText&gt;
&lt;MudText Typo=&quot;Typo.body1&quot; Class=&quot;mr-1&quot;&gt;Repair Code:&lt;/MudText&gt;&lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;mr-4&quot;&gt;@Page.RepairCode&lt;/MudText&gt;
&lt;MudText Typo=&quot;Typo.body1&quot; Class=&quot;mr-1&quot;&gt;Customer Id:&lt;/MudText&gt;&lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;mr-8&quot;&gt;@Page.CustomerId&lt;/MudText&gt;
@*&lt;MudTextField @bind-Value=&quot;searchString&quot; Placeholder=&quot;Search&quot; Adornment=&quot;Adornment.Start&quot; Immediate=&quot;true&quot; AdornmentIcon=&quot;@Icons.Material.Filled.Search&quot; IconSize=&quot;Size.Medium&quot; Class=&quot;mt-0&quot; /&gt;*@
&lt;MudSpacer /&gt;
&lt;MudButton Class=&quot;ml-4&quot; @onclick=&quot;ExportToExcelAsync&quot; Color=&quot;Color.Primary&quot; Variant=&quot;Variant.Outlined&quot;&gt;Export to Excel&lt;/MudButton&gt;
&lt;/ToolBarContent&gt;
&lt;Columns&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Repair_Id&quot; Sortable=&quot;true&quot; Title=&quot;#&quot; CellStyle=&quot;width: 10px&quot; h&gt;
&lt;CellTemplate&gt;
&lt;MudLink Href=&quot;@GetRepairDetailPageLink(context.Repair_Id)&quot; Target=&quot;_blank&quot;&gt;
&lt;MudText Style=&quot;color:darkblue&quot;&gt;@context.Repair_ID&lt;/MudText&gt;
&lt;/MudLink&gt;
&lt;/CellTemplate&gt;
&lt;/Column&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Mechanic&quot; Sortable=&quot;true&quot; Title=&quot;Mechanic&quot; CellStyle=&quot;min-width: 10px&quot; /&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Description&quot; Sortable=&quot;false&quot; Title=&quot;Description&quot; CellStyle=&quot;min-width: 300px&quot; /&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Repair&quot; Sortable=&quot;false&quot; Title=&quot;Repair Made&quot; CellStyle=&quot;min-width: 200px&quot; /&gt;       
&lt;/Columns&gt;
&lt;PagerContent&gt;
&lt;MudDataGridPager T=&quot;Repair&quot; PageSizeOptions=@(new int[] {10, 25, 50, 100, 150, 200 }) /&gt;
&lt;/PagerContent&gt;
&lt;/MudDataGrid&gt;

答案1

得分: 2

你可以通过将HorizontalScrollbar设置为true并添加CSS到你的DataGrid来解决这个问题。以下是翻译好的代码部分：

<MudDataGrid T="Repair" Items="@repairs" Sortable="true" SortMode="SortMode.Multiple" ColumnResizeMode="ResizeMode.Column" Filterable="false" Outlined="true"
             RowsPerPage="10" Hover="true" HorizontalScrollbar="true" Style="max-height: 500px; max-width: 600px; overflow: scroll;">
    <ToolBarContent>
        <MudText Typo="Typo.body1" Class="mr-1">Job Number:</MudText><MudText Typo="Typo.h6" Class="mr-4">job #</MudText>
        <MudText Typo="Typo.body1" Class="mr-1">Repair Code:</MudText><MudText Typo="Typo.h6" Class="mr-4">repair code</MudText>
        <MudText Typo="Typo.body1" Class="mr-1">Customer Id:</MudText><MudText Typo="Typo.h6" Class="mr-8">customer id</MudText>
        <MudSpacer />
        <MudButton Class="ml-4" @onclick="ExportToExcelAsync" Color="Color.Primary" Variant="Variant.Outlined">Export to Excel</MudButton>
    </ToolBarContent>
    <Columns>
        <Column T="Repair" Field="Repair_Id" Sortable="true" Title="#" CellStyle="width: 10px">
            <CellTemplate>
                <MudLink Href="#">
                    <MudText Style="color: darkblue">@context.Item.Repair_Id</MudText>
                </MudLink>
            </CellTemplate>
        </Column>
        <Column T="Repair" Field="Mechanic" Sortable="true" Title="Mechanic" CellStyle="min-width: 10px" />
        <Column T="Repair" Field="Description" Sortable="false" Title="Description" CellStyle="min-width: 300px" />
        <Column T="Repair" Field="RepairsMade" Sortable="false" Title="Repair Made" CellStyle="min-width: 200px" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Repair" PageSizeOptions="new int[] {10, 25, 50, 100, 150, 200 }" />
    </PagerContent>
</MudDataGrid>

你可以点击以下链接查看MudBlazor示例，以查看它的工作原理（只需点击左上角的播放按钮加载它）：https://try.mudblazor.com/snippet/cYQHYGGHCGuEaJEO

英文:

You should be able to solve this by setting HorizontalScrollbar to true and adding css to your datagrid:

&lt;MudDataGrid T=&quot;Repair&quot; Items=&quot;@repairs&quot; Sortable=&quot;true&quot; SortMode=&quot;SortMode.Multiple&quot; ColumnResizeMode=&quot;ResizeMode.Column&quot; Filterable=&quot;false&quot; Outlined=&quot;true&quot;
RowsPerPage=&quot;10&quot; Hover=&quot;true&quot; HorizontalScrollbar=&quot;true&quot; Style=&quot;max-height: 500px; max-width: 600px; overflow: scroll;&quot;&gt;
&lt;ToolBarContent&gt;
&lt;MudText Typo=&quot;Typo.body1&quot; Class=&quot;mr-1&quot;&gt;Job Number:&lt;/MudText&gt;&lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;mr-4&quot;&gt;job #&lt;/MudText&gt;
&lt;MudText Typo=&quot;Typo.body1&quot; Class=&quot;mr-1&quot;&gt;Repair Code:&lt;/MudText&gt;&lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;mr-4&quot;&gt;repair code&lt;/MudText&gt;
&lt;MudText Typo=&quot;Typo.body1&quot; Class=&quot;mr-1&quot;&gt;Customer Id:&lt;/MudText&gt;&lt;MudText Typo=&quot;Typo.h6&quot; Class=&quot;mr-8&quot;&gt;customer id&lt;/MudText&gt;
&lt;MudSpacer /&gt;
&lt;MudButton Class=&quot;ml-4&quot; @onclick=&quot;ExportToExcelAsync&quot; Color=&quot;Color.Primary&quot; Variant=&quot;Variant.Outlined&quot;&gt;Export to Excel&lt;/MudButton&gt;
&lt;/ToolBarContent&gt;
&lt;Columns&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Repair_Id&quot; Sortable=&quot;true&quot; Title=&quot;#&quot; CellStyle=&quot;width: 10px&quot; h&gt;
&lt;CellTemplate&gt;
&lt;MudLink Href=&quot;#&quot; Target=&quot;_blank&quot;&gt;
&lt;MudText Style=&quot;color: darkblue&quot;&gt;@context.Item.Repair_Id&lt;/MudText&gt;
&lt;/MudLink&gt;
&lt;/CellTemplate&gt;
&lt;/Column&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Mechanic&quot; Sortable=&quot;true&quot; Title=&quot;Mechanic&quot; CellStyle=&quot;min-width: 10px&quot; /&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;Description&quot; Sortable=&quot;false&quot; Title=&quot;Description&quot; CellStyle=&quot;min-width: 300px&quot; /&gt;
&lt;Column T=&quot;Repair&quot; Field=&quot;RepairsMade&quot; Sortable=&quot;false&quot; Title=&quot;Repair Made&quot; CellStyle=&quot;min-width: 200px&quot; /&gt;
&lt;/Columns&gt;
&lt;PagerContent&gt;
&lt;MudDataGridPager T=&quot;Repair&quot; PageSizeOptions=@(new int[] {10, 25, 50, 100, 150, 200 }) /&gt;
&lt;/PagerContent&gt;
&lt;/MudDataGrid&gt;

You can check out this MudBlazor snippet to see it working (just click the play button in the top left to load it): https://try.mudblazor.com/snippet/cYQHYGGHCGuEaJEO

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

How to make MudBlazor MudDataGrid horizontal scroll available without having to vertical scroll to bottom of the MudDataGrid displayed rows first?

问题

答案1

无法在jQuery中打开链接。

修改动画播放状态会影响动画与音频的同步。

在Flask中，我如何在一个.py文件中编写条件并只在HTML中打印结果？

Parse broken HTML with golang

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论