Context Menu Templates examples or documentation

[Vincent McCarthy]

Hello,

On the website there is a paragraph stating that one can update context menu items via templates (see below)
However, I cannot find any examples or documentation on how to do this.
I would like to create a standard context menu, nothing special, but with some extra data tags for each context menu item. How can I do this?
I appreciate any assistance or direction you can provide,

Regards
Vincent

[Mohan Kumar Ramasamy]

Hi Vincent, 

 

We have checked your reported query, we can achieve your requirement using Template property. Please refer below code snippets. 

 

 

<SfContextMenu Target="#contextmenutarget" Items="@MenuItems" TValue="ItemModel"> 

            <MenuTemplates TValue="ItemModel"> 

                <Template> 

                    @if (context.About == null) 

                    { 

                       <span class="e-text">@context.Content</span> 

                        if (context.ShortCut != null) 

                        { 

                            <span class="e-shortcut">@context.ShortCut</span> 

                        } 

                    } 

                    else 

                    { 

                        <div class="e-card"> 

                            <div class="e-card-content"> 

                                @context.About 

                            </div> 

                            <div class="e-card-actions"> 

                                <input type="button" class="e-btn e-outline" style="pointer-events: auto;" value="Read More" /> 

                            </div> 

                        </div> 

                    } 

                </Template> 

            </MenuTemplates> 

        </SfContextMenu> 

 

@code{ 

 

    private List<ItemModel> MenuItems = new List<ItemModel> 

{ 

                new ItemModel {  Content = "Undo", ShortCut = "Ctrl + Z" }, 

                new ItemModel { Content = "Redo", ShortCut = "Ctrl + Y" }, 

                new ItemModel { Separator = true }, 

                new ItemModel {  Content = "Cut", ShortCut = "Ctrl + X" }, 

                new ItemModel {  Content = "Copy", ShortCut = "Ctrl + C" }, 

                new ItemModel {  Content = "Paste", ShortCut = "Ctrl + V" }, 

                new ItemModel {  Content = "Delete", ShortCut = "Delete" }, 

                new ItemModel { Separator = true }, 

                new ItemModel { Content = "Duplicate", ShortCut = "Ctrl + D" }, 

                new ItemModel { Separator = true }, 

                new ItemModel { Content = "Edit Tooltip", Id = "edit-tooltip" }, 

                new ItemModel { Separator = true }, 

                new ItemModel { Content = "Select All", ShortCut = "Ctrl + A" }, 

    }; 

 

    private class ItemModel 

    { 

        public string Content { get; set; } 

        public string Icon { get; set; } 

        public string ShortCut { get; set; } 

        public bool Separator { get; set; } 

        public List<ItemModel> SubItems { get; set; } 

        public bool Disable { get; set; } 

        public string About { get; set; } 

        public string Id { get; set; } 

    } 

 

} 

    

<style> 

    .e-shortcut { 

        margin-right: -10px; 

        float: right; 

    } 

.e-contextmenu.e-menu-parent { 

        width: 180px !important; 

    } 

} 

 

For your reference, we have prepared a sample based on this, please refer below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/159146/ze/Contextmenu-Template2032980725  

 

We will update the same in our documentation. Once we refreshed the documentation, we will inform you. 

 

Regards, 

Mohan kumar R 

[Vincent McCarthy]

Hello Mohan,

Many thanks for the sample. I have passed it on to the developer working on this functionality and he is very grateful

Regards
Vincent

[Mohan Kumar Ramasamy]

Hi Vincent,   

  

Thanks for the update.  

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohankumar R