Access Context Menu Ref from DataGrid

[Davy]

Hello,

the Context Menu has a feature to open and close it by using the open & close method as described here:

https://blazor.syncfusion.com/documentation/context-menu/how-to/open-and-close-context-menu/?no-cache=1

How can we accomplish the same functionality when we use the Context Menu inside a DataGrid component? The idea is to have an "actions" button on each row. When the user clicks the button, the context menu should open.

I know it works on right clicking the row, but we want it a little bit different, by a normal mouse click on a button.

[Vignesh Natarajan]

Hi Davy,  

 

Greetings from Syncfusion support.  

 

Query: “The idea is to have an "actions" button on each row. When the user clicks the button, the context menu should open.” 

 

We suggest you to achieve your requirement using Column template feature of Grid. Using column template you can render custom component in Grid column. Instead of rendering a button and opening a context menu control. We have a DropDownButton control where a button will be rendered and on clicking the button, its menu will be shown.  

 

Refer the below code example.  

  

<SfGrid DataSource="@Employees"> 

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <SfDropDownButton Content="Actions"> 

                        <DropDownButtonItems> 

                            <DropDownButtonItem Text="Edit"></DropDownButtonItem> 

                            <DropDownButtonItem Text="Delete"></DropDownButtonItem> 

                            <DropDownButtonItem Text="Copy"></DropDownButtonItem> 

                        </DropDownButtonItems> 

                    </SfDropDownButton> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Refer the below screenshot for the output 

 

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template 

https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started/ 

 

Kindly get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan 

[Davy]

Ok, thanks. I disabled the context menu from the DataGrid and used the DropDownButton as you suggested.

This works fine.

[Vignesh Natarajan]

Hi Davy,  

Thanks for the update. 

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.   

Regards, 

Vignesh Natarajan 

[Davy]

Hello, I have now stumbled upon an issue with your proposed solution and the DataGris row selection.

As described in your solution, we have an GridColumn with a SfDropdownButton which acts as a contextmenu. However, when enabling row selection in the DataGrid, the  row gets selected when clicking the SfDropdownButton. 

I believe the row selection event should not be triggered directly when any buttons or SfDropdownButton is clicked.

Is there any way we can work around this?

[Vignesh Natarajan]

Hi Davy,  

 

Query: “I have now stumbled upon an issue with your proposed solution and the DataGris row selection.” 

 

We are able to reproduce the reported behavior at our end. Row selection can be prevented using RowSelecting event arguments by using (Args.Cancel). So we have achieve your requirement (prevent row selection on template column click) using OnMouseDown event of DropDownButton and RowSelecting event of Grid.  

 

Refer the below code example.  

 

<SfGrid DataSource="@Employees"> 

    <GridEvents RowSelected="RowSelected" RowSelecting="RowSelecting" TValue="EmployeeData"></GridEvents> 

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

  

                    <SfDropDownButton Content="Actions" OnMousedown="OnMouseDown"> 

. . . . ..  

                    </SfDropDownButton> 

  

                } 

            </Template> 

        </GridColumn> 

. . .. . .  

    </GridColumns> 

</SfGrid> 

  

@code{ 

    public List<EmployeeData> Employees { get; set; } 

    public bool CanSelect = true; 

    public void OnMouseDown() 

    { 

        CanSelect = false; 

    } 

    public void RowSelecting(RowSelectingEventArgs<EmployeeData> Args) 

    { 

        if (!CanSelect) 

        { 

            Args.Cancel = true; // prevent the row selection 

            CanSelect = true; 

        }        

    } 

    public void RowSelected(RowSelectEventArgs<EmployeeData> Args) 

    { 

  

    } 

 

  

Now RowSelected event will not be Triggered on clicking the DropDownButton. Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/153726/ze/BlazorApp1-627296810  

 

Kindly get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan  

[Davy]

Thanks, I implemented the suggested solution and I can confirm it is working.

[Vignesh Natarajan]

Hi Davy,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan