Skip to content

Latest commit

 

History

History
100 lines (78 loc) · 2.97 KB

refresh-data.md

File metadata and controls

100 lines (78 loc) · 2.97 KB
title page_title description slug tags published position
Refresh Data
Drawer Refresh Data
Refresh Drawer Data using Observable Data or creating a new Collection reference.
drawer-refresh-data
telerik,blazor,drawer,observable,data,new,collection
true
23

Drawer - Refresh Data

@template

In this article:

Observable Data

note The Drawer 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 Drawer data.

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

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

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

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

<TelerikDrawer Data="@Data"
               MiniMode="true"
               Mode="DrawerMode.Push"
               @ref="@DrawerRef"
               @bind-SelectedItem="@SelectedItem">
    <DrawerContent>
        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>
        <div class="m-5">
            Selected Item: @SelectedItem?.Text
        </div>
    </DrawerContent>
</TelerikDrawer>

@code {
    TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    DrawerItem SelectedItem { get; set; }

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

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

    void ChangeData()
    {
        Data = new List<DrawerItem>
        {
            new DrawerItem { Text = "Overview", Icon = SvgIcon.InfoCircle },
            new DrawerItem { Text = "Events", Icon = SvgIcon.Star },
        };
    }

    List<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            {
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
                            };

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

See Also