Hi Dominick,
Greetings from Syncfusion support.
Query: “I want to add a context menu to each row of control which has options such as "Create Project", "Invoice Client" etc”
We have achieved your requirement “to render the context menu and navigate to another page with details” using CustomContextMenu feature of Grid. We have navigated to another page with details of the selected row using RowSelected event and ContextMenuItemClicked event of Grid. Refer to the below code example.
|
@{
List<ContextMenuItemModel> ContextMenuItems = new List<ContextMenuItemModel>();
ContextMenuItems.Add(new ContextMenuItemModel() { Text = "Create Project", Target = ".e-content", Id = "createProject" });
ContextMenuItems.Add(new ContextMenuItemModel() { Text = "Invoice Client", Target = ".e-content", Id = "invoiceclient" });
}
<EjsGrid @ref="@Grid" TValue="Order" DataSource="@Orders" ContextMenuItems="ContextMenuItems" AllowPaging="true">
<GridEvents ContextMenuItemClicked="OnContextClicked" RowSelected="OnSelected" TValue="Order"></GridEvents>
<GridPageSettings PageSize="5"></GridPageSettings>
…………………………………………………
</EjsGrid>
@code{
EjsGrid<Order> Grid;
public Order SelectedRow { get; set; }
public List<Order> Orders { get; set; }
public void OnContextClicked(Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs Args)
{
if(Args.Item.Text == "Invoice Client")
{
UriHelper.NavigateTo($"/counter/{SelectedRow.OrderID}");
}
else if(Args.Item.Text == "Create Project")
{
UriHelper.NavigateTo($"/counter/{0}");
}
}
public void OnSelected(RowSelectEventArgs<Order> args) {
SelectedRow = args.Data;
}
} |
Note: As an example, we have navigated to another page with selected row details on clicking the Invoice Client item. Similarly sent the value as 0 to another page while clicking Create Project item, through this way you can achieve your requirement of “build the menu item dynamically with extra data”.
Kindly download the sample from below link
Please get back to us if you have any queries.
Regards,
Vignesh Natarajan.
