show the contextmenu by clicking on a button in the row

[Salvatore]

HI, 

I have a grid with a context menu that is activated by right clicking on the mosue.

If you wanted to do the same thing but using the button on the line that call, at the end, the 

ContextMenuOpen method,

how should you do it?

waiting for a kind reply

Greetings

[Rahul Narayanasamy]

Hi Salvatore, 

Greetings from Syncfusion. 

We have validated your query and currently we don’t have any methods to open the context menu in the Grid. For this scenario, we suggest you to rendered DropDown button in the Grid Column using Template and while selecting the item you can handle the corresponding actions. Find the below code snippets and sample for your reference. 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowSorting="true" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true"  

        ContextMenuItems="@(new List<object>() { "AutoFitAll","Edit", "Delete"})"> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridEditSettings AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn HeaderText="Actions" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <div> 

                        <SfDropDownButton Content="Edit"> 

                            <DropDownButtonEvents ItemSelected="ItemSelected"></DropDownButtonEvents> 

                                <DropDownMenuItems> 

                                    <DropDownMenuItem Text="Copy"></DropDownMenuItem> 

                                    <DropDownMenuItem Text="Delete"></DropDownMenuItem> 

                                    <DropDownMenuItem Text="AutoFitAll"></DropDownMenuItem> 

                                </DropDownMenuItems> 

                        </SfDropDownButton> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

    public List<Order> Orders { get; set; } 

 

    . ..  

    private async Task ItemSelected(MenuEventArgs args) 

    { 

        if(args.Item.Text == "Delete") 

        { 

            await Grid.DeleteRecordAsync(); 

        } 

        if (args.Item.Text == "Copy") 

        { 

            await Grid.CopyAsync(); 

        } 

        if (args.Item.Text == "AutoFitAll") 

        { 

            await Grid.AutoFitColumnsAsync(); 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/172011/ze/WebApplication1-697898344  

Reference: 

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

https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started#add-blazor-dropdown-menu-component 

 

Please let us know if you have any concerns. 

Regards, 

Rahul