Components / Context Menu / Data Binding

New to Telerik UI for Blazor? Download free 30-day trial

Context Menu Data Binding Basics

This article explains the different ways to provide data to a Context Menu component, the properties related to data binding and their results.

For details on Value Binding and Data Binding, and the differences between them, see the Value Binding vs Data Binding article.

First, review:

There are two modes of providing data to a menu, and they all use the items' features. Once you are familiar with the current article, choose the data binding more you wish to use:

  • Hierarchical data - separate collections of items and their child items.
  • Flat data - a single collection of items with defined parent-child relationships.

Context Menu Item Features

The menu items provide the following features that you control through the corresponding fields in their data binding:

  • Id - a unique identifier for the item. Required for binding to flat data.

  • ParentId - identifies the parent to whom the item belongs. Required only when binding to flat data. All items with the same ParentId will be rendered at the same level. For a root level item, this must be null. There should be at least one root-level item.

  • HasChildren - can hide child items. The menu will fetch its children from the data source based on the Id-ParentId relationships (for flat data) or on the presence of the Items collection (for hierarchical data). If you set HasChildren to false, child items will not be rendered even if they are present in the data. If there are no child items in the data, an expand icon will not be rendered regardless of its value.

  • Items - the collection of child items that will be rendered under the current item. Required only when binding to hierarchical data.

  • Text - the text that will be shown on the item.

  • Icon - The Telerik Font or SVG icon that will be rendered in the item. Read more in the Icons article.

  • Url - the view the item will navigate to by generating a link.

  • Separator - when set to true, the item will be just a line that makes a distinction between its neighbors clearly visible. Thus, you can place logically grouped items between two separators to distinguish them. A separator item does not render text, icons, children or a navigable link.

  • Disabled - You can disable items by setting this field to true. Such items will keep rendering but will not be clickable.

Data Bindings

The properties of a menu item match directly to a field of the model the menu is bound to. You provide that relationship by providing the name of the field from which the corresponding information is present. To do this, use the properties in the main TelerikMenu tag:

  • IdField => Id
  • ParentIdField => ParentId
  • TextField => Text
  • IconField => Icon
  • UrlField => Url
  • HasChildrenField => HasChildren
  • ItemsField => Items
  • DisabledField => DisabledField
  • SeparatorField => Separator

There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings.

If your model field names match any of the default names, the component will try to use them. For example, a field called Icon will try to produce a Telerik icon out of those values and that may not be what you want. If you want to override such behaviors, you can set IconField="someNonExistingField". You can read more about this here. This also applies to other fields too. Another example would be a field called Url - in case you want to perform navigation yourself through templates, you may want to set UrlField="someFakeField" so that the component does not navigate on its own.

Default field names for menu item bindings. If you use these, you don't have to specify them in the TelerikMenu tag explicitly.

public class ContextMenuItem
{
    public int Id { get; set; }
    public string Text { get; set; }
    public int? ParentId { get; set; }
    public bool HasChildren { get; set; }
    public ISvgIcon Icon { get; set; }
    public string Url { get; set; }
    public bool Disabled { get; set; }
    public bool Separator { get; set; }
}

Data bind the context menu to a model with custom field names

@* This example shows flat data binding with custom fields, and two separator items around a disabled item at the root level and in the nested menu *@

<div class="menuTarget">
    right click this context menu target
</div>

<TelerikContextMenu Data="@ContextMenuItems" Selector=".menuTarget"
             ParentIdField="@nameof(ContextMenuItem.SectionId)"
             IdField="@nameof(ContextMenuItem.Id)"
             TextField="@nameof(ContextMenuItem.Section)"
             UrlField="@nameof(ContextMenuItem.Page)"
             DisabledField="@nameof(ContextMenuItem.IsDisabled)"
             SeparatorField="@nameof(ContextMenuItem.IsItemSeparator)">
</TelerikContextMenu>

@code {
    public List<ContextMenuItem> ContextMenuItems { get; set; }

    public class ContextMenuItem
    {
        public int Id { get; set; }
        public int? SectionId { get; set; }
        public string Section { get; set; }
        public string Page { get; set; }
        public bool IsDisabled { get; set; }
        public bool IsItemSeparator { get; set; }
    }

    protected override void OnInitialized()
    {
        ContextMenuItems = new List<ContextMenuItem>()
        {
            // sample URLs for SPA navigation
            new ContextMenuItem()
            {
                Id = 1,
                Section = "Overview",
                Page = "contextmenu/overview"
            },
            new ContextMenuItem()
            {
                Id = 2,
                Section = "Demos",
                Page = "contextmenu/demos"
            },
            new ContextMenuItem() // separator item
            {
                Id = 3,
                IsItemSeparator = true
            },
            new ContextMenuItem() // disabled item
            {
                Id = 4,
                Section = "Disbled Item",
                IsDisabled = true
            },
            new ContextMenuItem()
            {
                Id = 5,
                IsItemSeparator = true
            },
            new ContextMenuItem()
            {
                Id = 6,
                Section = "Roadmap"
            },
            // sample URLs for external navigation
            new ContextMenuItem()
            {
                Id = 7,
                SectionId = 6,
                Section = "What's new",
                Page = "https://www.telerik.com/support/whats-new"
            },
            new ContextMenuItem()
            {
                Id = 9,
                SectionId = 6,
                Section = "Release History",
                Page = "https://www.telerik.com/support/whats-new/blazor-ui/release-history"
            },
            new ContextMenuItem()
            {
                Id = 10,
                IsItemSeparator = true,
                SectionId = 6
            },
            new ContextMenuItem()
            {
                Id = 11,
                SectionId = 6,
                Section = "Roadmap",
                Page = "https://www.telerik.com/support/whats-new/blazor-ui/roadmap"

            }
        };

        base.OnInitialized();
    }
}

<style>
    .menuTarget {
        width: 100px;
        background: yellow;
        margin: 50px;
    }
</style>

The result from the snippet above

context menu data binding example

See Also

In this article
Related articles
Not finding the help you need? Improve this article