Mudblazor-MudDataGrid 单元格点击事件

Question

我正在使用 .NET Core 7 构建一个 blazor 服务器应用程序，我正在使用 Mudblazor UI 组件库。我很难找到一种方法来拦截连续的 cell 单击事件。我的主要目标是能够获得被点击的行单元格。我能够捕获 Row click 事件，但这不是我所追求的。如果组件提供，我需要用户单击的实际单元格。

我附上现有的 blazor 代码：

<MudDataGrid T="Element" MultiSelection="true" Items="@Elements" SortMode="SortMode.Multiple" QuickFilter="@_quickFilter"
                         Hideable="true" RowClick="@RowClicked" SelectedItemsChanged="@SelectedItemsChanged">
                <ToolBarContent>
                    <MudSpacer />
                    <MudTextField @bind-Value="_searchString" Placeholder="Table Search" Adornment="Adornment.Start" Immediate="true"
                                  AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
                    <MudButton Style="background-color:coral;color:white;margin-left: 20px;" StartIcon="@Icons.Material.Filled.Add">
                        @if (!isMobileDevice)
                        {
                            <span>New Item</span>
                        }
                    </MudButton>
                </ToolBarContent>
                <Columns>
                    <SelectColumn T="Element" />
                    <PropertyColumn Property="x => x.SKU" Title="SKU Number" Sortable="true" Filterable="true" />
                    <PropertyColumn Property="x => x.Name" Title="Name" Sortable="true" Filterable="true" CellStyleFunc="@_cellStyleFunc" onclick="OnCellClick" />
                    <PropertyColumn Property="x => x.Quentity" Title="Qty On-Hand" Sortable="true" Filterable="true" />
                    <PropertyColumn Property="x => x.Measurement" Title="UOM" Sortable="true" Filterable="true" />
                    <PropertyColumn Property="x => x.Location" Title="Location" Sortable="true" Filterable="true" />
                    <PropertyColumn Property="x => x.Type" Title="Type" Sortable="true" Filterable="true" />
                    <TemplateColumn CellClass="justify-end">
                        <CellTemplate>
                            <MudMenu Icon="@Icons.Material.Filled.MoreVert" AnchorOrigin="@Origin.BottomLeft" TransformOrigin="@Origin.TopRight">
                                <MudMenuItem Icon="@Icons.Material.Outlined.Edit">Edit</MudMenuItem>
                                <MudMenuItem Icon="@Icons.Material.Outlined.ContentCopy">Duplicate</MudMenuItem>
                                <MudMenuItem Icon="@Icons.Material.Outlined.MultipleStop">Transfer Qty</MudMenuItem>
                                <MudMenuItem Icon="@Icons.Material.Outlined.Archive">Archive</MudMenuItem>
                            </MudMenu>
                        </CellTemplate>
                    </TemplateColumn>
                </Columns>
                <PagerContent>
                    <MudDataGridPager T="Element" />
                </PagerContent>
            </MudDataGrid>

我尝试在 PropertyColumn 标记处添加一个 OnClick 事件，但该事件没有被触发。我也搜索了文档，但似乎没有包含此功能的信息。我也在网上搜索过，但这也没有结果！

或者，我希望能够创建一个可点击的单元格，并通过接收行数据来响应点击事件。

任何帮助将不胜感激，因为网格工作得很好，开箱即用。

Answer 1

您可以使用

TemplateColumn

>

CellTemplate

>显示组件。

然后，可以在显示组件上添加@onclick事件。您可以在哪里使用

MudDataGrid

访问

context.Item

中定义的项目

<MudDataGrid T="MyObject" Items="@_myObjectsCollection" RowClick="@RowClicked">
    <TemplateColumn Title="Name">
        <CellTemplate>
            <MudText @onclick="@(()=>RowCellClicked(context.Item.Name))">@context.Item.Name</MudText>
        </CellTemplate>
    </TemplateColumn>
</MudDataGrid>

@code
{
    List<MyObject> _myObjectsCollection;

    void RowCellClicked(string name)
    {
        // cell clicked logic
    }
}

mudblazor 片段