We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding dynamic data

Thread ID:

Created:

Updated:

Platform:

Replies:

146632 Aug 12,2019 05:23 AM UTC Aug 13,2019 10:19 AM UTC Blazor 1
loading
Tags: Context Menu
Dominick Marciano
Asked On August 12, 2019 05:23 AM UTC

I want to add a context menu to each row of a control which has options such as "Create Project", "Invoice Client" etc and then when this menu item is clicked, it navigates the users to the appropriate page. For this to work though, I need to be able to build the menu items dynamically so I can add extra data (e.g. the client ID from the grid) so that it can be included in the query string to the appropriate page.  Is this possible with the Blazor servier-side context menu control?

Vignesh Natarajan [Syncfusion]
Replied On August 13, 2019 10:19 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon