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:
- The available (bindable) features of a drawer item.
- How to match fields in the model with the drawer item data bindings.
- Example of using non-default field names for data binding.
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:
https://docs.telerik.com/blazor-ui/components/drawer/navigation
*@
<TelerikDrawer Data="@Data" UrlField="ItemUrl" TextField="ItemText" IconField="ItemIcon"
MiniMode="true" Mode="@DrawerMode.Push" Expanded="true">
<DrawerContent>
@Body
</DrawerContent>
</TelerikDrawer>
@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; }
}
}