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

Drawer Data Binding

This article explains the how to provide data to a Drawer component so it renders items for you, 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.

This article has the following sections:

Drawer Item Features

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

  • 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 - whether the item will be a separator line instead of a clickable item.

Data Bindings

The properties of a drawer item match directly to a field of the model the drawer 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 TelerikDrawer tag:

  • TextField => Text
  • IconField => Icon
  • UrlField => Url
  • 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 drawer item bindings. If you use these, you don't have to specify them in the TelerikDrawer tag explicitly.

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

Example - Data Binding to Non-Default Field Names

@* This example shows how you can data bind the drawer and set the field names it will use from the model 
Place it in the MainLayout.razor so you can use it for navigation:

<TelerikDrawer Data="@Data" UrlField="ItemUrl" TextField="ItemText" IconField="ItemIcon"
               MiniMode="true" Mode="@DrawerMode.Push" Expanded="true">

@code {
    IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            new DrawerItem { ItemText = "Counter", ItemIcon = SvgIcon.Plus, ItemUrl = "counter" },
            new DrawerItem { ItemText = "FetchData", ItemIcon = SvgIcon.GridLayout, ItemUrl = "fetchdata" },

    public class DrawerItem
        public string ItemText { get; set; }
        public ISvgIcon ItemIcon { get; set; }
        public string ItemUrl { get; set; }

See Also

In this article