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. Image for the cookie policy date
close icon

Adding dynamic data

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?

1 Reply

VN Vignesh Natarajan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon