CODEWITHSUNDEEP
blazor.net-7.0mudblazor
Sotiris Zegiannis
Sotiris Zegiannis

Reputation: 465

Mudblazor-MudDataGrid cell click event

i m building a blazor server app, using .NET Core 7 and i m using the Mudblazor UI component library. I m having trouble finding a way to intercept the cell click event, of a row. My main goal is to be able to get the row-cell that was clicked. I am able to catch the Row click event, but this is not what i m after. I need the actual cell that the user clicked, if this is provided by the component.

I m attaching the existing blazor code:

<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>

I have tried adding an OnClick event, at the PropertyColumn tag, but the event is not being fired. I have also searched the documentation, but there does not seem to contain information for this functionality. I have also searched on the internet, but this has not bare fruit either!

Alternatively, i would like to be able to create a clickable cell, and respond to the clicked event, by also receiving the row data.

Any help would be really appreciated, since the grid works really well, out of the box.

Upvotes: 2

Views: 8459

Answers (2)

Connor Moloney
Connor Moloney

Reputation: 31

They have since added RowClick

<MudDataGrid RowClick="(e) => DoThing(e.Item)"/>

Upvotes: 3

RBee
RBee

Reputation: 4902

You can use TemplateColumn>CellTemplate>display component.

Then, you can add the @onclick event on the display component. Where you can access the items defined in MudDataGrid by using 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 Snippet

Upvotes: 4

Related Questions