Menu on each item ?

[Yordan]

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.

[Sowmiya Padmanaban]

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. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1890184122.zip 

 

UG Documentation: https://ej2.syncfusion.com/blazor/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/ 

 

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 

[Yordan]

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.

[Sowmiya Padmanaban]

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 

[Yordan]

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 ).

[Sowmiya Padmanaban]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-398215682.zip 

 

To know about the contextmenu functions, Refer the below link. 

https://ej2.syncfusion.com/blazor/documentation/context-menu/how-to/enable-or-disable-context-menu-items/ 

 

Please let us know, if you have any concerns. 

  

Regards, 

Sowmiya.P 

[Yordan]

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

[Sowmiya Padmanaban]

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. 

 

https://www.syncfusion.com/feedback/10534/template-not-renders-while-providing-model-class-with-lower-case-property-names 

  

Please let us know, if you have any concerns. 

 

Regards, 

Sowmiya.P 

[Sowmiya Padmanaban]

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.  

  

https://www.syncfusion.com/forums/150001/essential-studio-2019-volume-4-release-v17-4-0-39-is-available-for-download 

 

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. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp-1975588726.zip 

 

Also, please check out the below links for more details regarding this newly included event.  

  

Release Notes: https://ej2.syncfusion.com/blazor/documentation/release-notes/index/#treeview  

  

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