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
  1. Home
  2. Forum
  3. Blazor
  4. Menu on each item ?

Menu on each item ?

Hello.

I am having the follow issue - how to add a menu to each item of a TreeView without wasting too much resources ?

For instance - let's assume a treeview which is template driven, and there is an IMG object in each node, and when clicked this IMG object a menu appears which is relative to the clicked node.

8 Replies
SP Sowmiya Padmanaban Syncfusion Team December 6, 2019 01:15 PM UTC

Hi Yordon, 
 
Thanks for contacting Syncfusion support. 
  
We have checked your reported query to display the context menu during TreeView nodeclick. Refer the below sample for your requirement. In that sample, we have to display the context menu during right click of treeview element. 
 
 
 
If we misunderstand your requirement, can you please the additional details regarding your requirement, it will helpful for us to resolve your issue at earlier. 
 
Please let us know, if you have any concerns.  
 
 
Regards, 
Sowmiya.P 


YO Yordan December 6, 2019 01:46 PM UTC

Hello dear support.
1st of all : Thanks a lot for the example.
Anyway I were looking for a context based menu which is only poping up on a specific part of the node.

For instance only on the image object, and when the menu popsup the content of the menu to change based on the tree node.
which means that the menu should change dinamically based on the node, and popsups only on specific part of the node.


SP Sowmiya Padmanaban Syncfusion Team December 9, 2019 12:46 PM UTC

Hi Yordon,  
 
Currently, we are validating your requirement while it is achievable in Blazor platform or not. We will update the validation details within two business days(11/12/2019). Please be patience, until then. 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 


YO Yordan December 9, 2019 12:48 PM UTC

Probably it is achievable, but the menu have to have a method to call where to popsup ( the easiest way ), and when the item is clicked to transfter data trough the click to the popup called function, and the coordinates where to popup. ( maybe ).

SP Sowmiya Padmanaban Syncfusion Team December 10, 2019 12:38 PM UTC

Hi Yordon, 
 
Sorry for the inconvenience. 
 
We have validated your query to open different context menu while clicking a image. Yes, it is possible to achieve in blazor platform. You can bind click event for image element, during that event you can set different context menu based on image id and open the context menu element using Open() event.  
 
Refer the below code snippet. 
<TreeViewTemplates> 
        <NodeTemplate> 
            @{ 
                var employee = ((context as EmployeeDetails)); 
                <img id="@((@context as EmployeeDetails).EmployeeId)" class="eimage" src="@UriHelper.ToAbsoluteUri($"/{@employee.Image}.png")" @onclick="@((e) =>MemberFunction((@context as EmployeeDetails).EmployeeId, e))" /> 
                <div class="ename">@((@context as EmployeeDetails).EmployeeName)</div> 
                <div class="ejob">@((@context as EmployeeDetails).Designation)</div> 
            } 
        </NodeTemplate> 
    </TreeViewTemplates> 
 
Code for MemberFunction. 
  void MemberFunction(int args, MouseEventArgs args1) 
    { 
        // Set context menu item based on image id /*args- image id*/  
        if (args == 1) 
        { 
            menu.HideItems(this.RemoveItem); 
            menu.ShowItems(this.showItem); 
        } 
        else 
        { 
            menu.HideItems(this.showItem); 
            menu.ShowItems(this.RemoveItem); 
        } 
        //Open the context menu during click 
        menu.Open(args1.ClientY + 20, args1.ClientX + 10); 
    } 
 
For your reference, we have prepared a sample. Refer the sample link below. 
 
To know about the contextmenu functions, Refer the below link. 
 
Please let us know, if you have any concerns. 
  
Regards, 
Sowmiya.P 


YO Yordan December 11, 2019 07:46 AM UTC

Works ! Thank You very much.

Anyway. I would like to report that if the datamodel contains a field starting with small letter - it will break the logic.
For instance Image -> image

SP Sowmiya Padmanaban Syncfusion Team December 12, 2019 12:13 PM UTC

Hi Yordon, 
 
Sorry for the inconvenience. 
 
While validating your reported issue, we have already considered this as a bug from our end. It will be included in our upcoming Volume 4 Release which is expected to be released at the end of next week. Please be patience, until then. Refer the below link for tracking the bug status. 
 
  
Please let us know, if you have any concerns. 
 
Regards, 
Sowmiya.P 


SP Sowmiya Padmanaban Syncfusion Team December 19, 2019 12:02 PM UTC

Hi Yordon, 
 
We are glad to announce that our Essential Studio 2019 Volume 4 release v17.4.0.39 is rolled out and it is available for download under the following link.  
  
 
As mentioned in our previous update, we have implemented and included the fix for the “Template rendering while providing model class with lower case property names” with this release (v17.4.0.39).  
 
We have prepared a sample for your reference. 
 
Also, please check out the below links for more details regarding this newly included event.  
  
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  
 
Regards, 
Sowmiya.P 


Loader.
Up arrow icon