selection.md

title	page_title	description	slug	tags	published	position
Selection	Drawer - Seletion	Item selection in the Drawer for Blazor.	drawer-selection	telerik,blazor,drawer,selection,item,selected,items	true	10

Drawer Selection

The Drawer lets the user select an item. You can also pre-select a desired item. You can use this highlighted item to load/generate content, or to denote the current page.

To use the item selection, use set the SelectedItem parameter. It allows two-way binding (@bind-SelectedItem) and one-way binding + [SelectedItemChanged]({%slug drawer-events%}#selecteditemchanged) event.

The SelectedItem is of the same type as the Drawer data model.

If you use the drawer for [page navigation]({%slug drawer-navigation%}), the selected item will remain highlighted as long as the drawer does not get disposed - meaning, it must be outside of the @Body.

caption Use tho way data binding for the SelectedItem.

@* Use two-way data binding with the SelectedItem to display contents according to the user selection *@

<TelerikDrawer Data="@Data"
               MiniMode="true"
               Mode="@DrawerMode.Push"
               @bind-SelectedItem="@selectedItem"
               @ref="@DrawerRef">
    <DrawerContent>
        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>
        <div class="text-info">
            Content for the @selectedItem?.Text item
        </div>
    </DrawerContent>
</TelerikDrawer>

@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public DrawerItem selectedItem { get; set; }
    public List<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            {
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
             };

    protected override void OnInitialized()
    {
        // pre-select an item. Not required
        selectedItem = Data[Data.Count - 1];
    }

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

See Also

• [Drawer Events]({%slug drawer-events%})
• [Drawer Data Binding]({%slug drawer-data-binding%})
• [Drawer Navigation]({%slug drawer-navigation%})