Skip to content

Latest commit

 

History

History
122 lines (99 loc) · 3.33 KB

refresh-data.md

File metadata and controls

122 lines (99 loc) · 3.33 KB
title page_title description slug tags published position
Refresh Data
Context Menu Refresh Data
Refresh Context Menu Data using Observable Data or creating a new Collection reference.
context-menu-refresh-data
telerik,blazor,context,menu,observable,data,new,collection
true
25

Context Menu - Refresh Data

@template

In this article:

Observable Data

note The Context Menu does not support binding to observable data. You can currently refresh the component by creating a new collection reference.

@template

New Collection Reference

@template

caption Create new collection reference to refresh the Context Menu data.

@* Add/remove an item or change the data collection to see how the Context Menu reacts to that change. *@

<TelerikButton OnClick="@AddItem">Add item</TelerikButton>

<TelerikButton OnClick="@RemoveItem">Remove item</TelerikButton>

<TelerikButton OnClick="@ChangeData">Change data</TelerikButton>

<div id="context-menu-target" style="background:yellow; width:200px; height:50px">right click for context menu</div>

<TelerikContextMenu Data="@MenuData"
                    Selector="#context-menu-target"
                    IconField="@nameof(MenuModel.Icon)">
</TelerikContextMenu>

@code {
    public List<MenuModel> MenuData { get; set; }

    void AddItem()
    {
        MenuData.Add(
            new MenuModel()
                {
                    Text = "Info",
                    Icon = SvgIcon.InfoCircle
                });
        MenuData = new List<MenuModel>(MenuData);
    }

    void RemoveItem()
    {
        if (MenuData.Count > 0)
        {
            MenuData.RemoveAt(MenuData.IndexOf(MenuData.Last()));
            MenuData = new List<MenuModel>(MenuData);
        }
    }

    void ChangeData()
    {
        MenuData = new List<MenuModel>()
        {
            new MenuModel()
            {
                Text = "Copy",
                Icon = SvgIcon.Copy
            },
            new MenuModel()
            {
                Text = "Cut",
                Icon = SvgIcon.Cut
            }
        };
        MenuData = new List<MenuModel>(MenuData);
    }

    protected override void OnInitialized()
    {
        MenuData = new List<MenuModel>()
        {
            new MenuModel()
            {
                Text = "IconField",
                Icon = SvgIcon.Envelope
            },
            new MenuModel()
            {
                Text = "Wrench Icon,
                Icon = SvgIcon.Wrench,
            },
            new MenuModel()
             {
                Text = "File Video Icon",
                Icon = SvgIcon.FileVideo
             }
        };
    }

    public class MenuModel
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}

See Also