Blazor Server下Mudblazor MudDataGrid单元格点击事件捕获求助

MudBlazor 的 PropertyColumn 本身并未内置单元格点击事件，直接在标签上添加 onclick 或 @onclick 不会触发。以下是两种可行的实现方案：

方案一：用 TemplateColumn 自定义可点击单元格 #

将需要捕获点击的 PropertyColumn 替换为 TemplateColumn，在单元格模板内包裹内容并绑定 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" />
        <!-- 将Name列改为TemplateColumn实现点击 -->
        <TemplateColumn Title="Name" Sortable="true" Filterable="true" CellStyleFunc="@_cellStyleFunc">
            <CellTemplate>
                <div @onclick="() => OnCellClick(context.Item, "Name")">
                    @context.Item.Name
                </div>
            </CellTemplate>
        </TemplateColumn>
        <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>

对应的C#处理方法 #

private void OnCellClick(Element item, string columnName)
{
    // 这里可获取点击的行数据与列名，执行业务逻辑
    Console.WriteLine($"点击单元格：列名={columnName}，SKU={item.SKU}");
}

该方案直观简洁，无需JS介入，适合单个或少数需要点击的列场景。

方案二：JS互操作全局捕获单元格点击 #

若需给所有单元格添加点击事件，可通过JS监听表格单元格点击，再将数据传递回Blazor处理。

步骤1：添加JS代码 #

window.registerGridCellClick = function(componentRef) {
    document.addEventListener('click', function(e) {
        const cell = e.target.closest('.mud-table-cell');
        if (!cell) return;
        
        const row = cell.closest('.mud-table-row');
        const item = JSON.parse(row.getAttribute('data-item'));
        const cellIndex = Array.from(row.children).indexOf(cell);
        const columns = Array.from(row.parentElement.parentElement.querySelectorAll('.mud-table-header-cell'))
                            .map(c => c.textContent.trim());
        const columnName = columns[cellIndex];
        
        componentRef.invokeMethodAsync('OnGridCellClicked', item, columnName);
    });
};

步骤2：Blazor组件内绑定与处理 #

private DotNetObjectReference<YourComponent>? _componentRef;

protected override async Task OnInitializedAsync()
{
    _componentRef = DotNetObjectReference.Create(this);
    await JS.InvokeVoidAsync("registerGridCellClick", _componentRef);
}

[JSInvokable]
public void OnGridCellClicked(Element item, string columnName)
{
    // 处理单元格点击逻辑
    Console.WriteLine($"点击单元格：列名={columnName}，SKU={item.SKU}");
    StateHasChanged();
}

public void Dispose()
{
    _componentRef?.Dispose();
}

该方案适合全局批量配置单元格点击事件的场景，一次注册即可生效。

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