Drawer Templates

The Drawer can be customized by using Templates. This article explains the available layout templates for the component.

ItemTemplate

The <ItemTemplate> controls the rendering of the data bound items in the Drawer, in case you want to use a rendering different than the default one.

This template receives a context argument that is of the data model type and represents the current item.

Use ItemTemplate to control the rendering of the items in the Drawer.

@* This example shows how to control the rendering of the items in the Drawer menu *@

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu" />

<TelerikDrawer @bind-Expanded="@Expanded"
               Data="@Data"
               MiniMode="true"
               Mode="@DrawerMode.Push"
               @bind-SelectedItem="@SelectedItem"
               @ref="@DrawerRef">
    <ItemTemplate Context="item">
        <span class="k-icon k-i-@item.Icon" style="margin-right: 8px;"></span>
        @if (Expanded)
        {
            <div class="@( item.Icon.ToLowerInvariant() == "gear" ? "text-danger" : "text-info" )">
                <div style="font-weight:bold;">@item.Text</div>
            </div>
        }
    </ItemTemplate>
    <Content>
        <strong>@SelectedItem?.Description</strong>
    </Content>
</TelerikDrawer>


@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool Expanded { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
    {
        new DrawerItem {Text = "Shopping Cart", Icon = IconName.Cart, Description = "Items in shopping cart"},
        new DrawerItem {Text = "Notifications", Icon = IconName.Notification, Description = "My profile notifications"},
        new DrawerItem {Text = "Calendar", Icon = IconName.Calendar, Description = "My events"},
        new DrawerItem {Text = "Settings", Icon = IconName.Gear, Description = "My profile settings"},
    };

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

The result of the code snippet above

drawer template example

Template

The <Template> allows you to control the whole rendering of the Drawer so you can add extra content and application logic. This template receives a context argument that is IEnumerable<TItem> - it is the Data collection of the component.

When using this template all built-in features of the Drawer are disabled and should be implemented by the application, for example the item selection and rendering, navigation to different pages, etc. Page navigation can be done with <a>, <NavLink>, NavigationManager and so on.

The drawer will expand and collapse as usual, but the content has to be controlled by the application entirely.

Make sure that the <Content> tag is outside of the <Template> - the <Content> is responsible for the rendering the application outside of the Drawer, whereas the <Template> controls only the rendering of the component. In the <Content> tag you can place the @Body when you are using the Drawer as a sidebar navigation.

You can find a runnable sample that showcases this in the Drawer as Side Navigation using the Template sample project.

Using the <Template> and <ItemTemplate> together is not possible - the Template removes any built-in rendering from the Drawer.

Using a template with manual item selection, header and footer

@* This example shows how to create header and footer for the Drawer and select an item manually. *@

<TelerikDrawer @bind-Expanded="@DrawerExpanded"
               Data="@Data"
               MiniMode="true"
               Mode="@DrawerMode.Push"
               @bind-SelectedItem="@SelectedItem"
               @ref="@DrawerRef">
    <Template>
        @* the header *@
        <div>
            <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu" />
            @if (DrawerExpanded)
            {
                <div class="text-info" style="border-bottom:solid; font-weight: bold; margin-bottom: 3em; white-space:nowrap">
                    My Custom Navigation
                </div>
            }
            else
            {
                <div class="text-info" style="border-bottom:solid; font-weight: bold;">
                    Nav
                </div>
            }
        </div>

        @* custom items rendering and item selection *@

        <div class="k-drawer-items">
            <ul>
                @if (SelectedItem != null && DrawerExpanded)
                {
                    <li class="k-drawer-item" style="white-space:nowrap">
                        <div>
                            <p><strong>@SelectedItem.Text</strong></p>
                            <p>@SelectedItem.Description</p>
                        </div>
                    </li>
                }

                @foreach (var item in Data)
                {
                    @* Use onclick to handle manual item selection *@
                    <li @onclick="@(() => SelectedItem = item)"
                        class="k-drawer-item @GetSelectedItemClass(item)" style="white-space:nowrap">
                        <span class="k-icon k-i-@item.Icon" style="margin-right: 8px;"></span>
                        @if (DrawerExpanded)
                        {
                            <div>
                                <div>@item.Text</div>
                            </div>
                        }
                    </li>
                }
            </ul>
        </div>

        @* the footer *@
        @if (DrawerExpanded)
        {
            <div style="text-align: center; margin-top: 3em; padding-top: 2em; border-top: 2px solid black; white-space:nowrap">
                <img src="user-avatar.png" alt="my avatar" style="border-radius: 50%; width: 50px; height: 50px;" />
                <br /><br />
                <TelerikButton Icon="@IconName.Logout" Primary="true">Log Out</TelerikButton>
            </div>
        }
    </Template>
    <Content>
        <div class="m-5">Content for @SelectedItem?.Text - @SelectedItem?.Description</div>
    </Content>
</TelerikDrawer>

@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool DrawerExpanded { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
{
        new DrawerItem {Text = "Shopping Cart", Icon = IconName.Cart, Description = "Items in shopping cart"},
        new DrawerItem {Text = "Settings", Icon = IconName.Gear, Description = "My profile settings"},
        new DrawerItem {Text = "Notifications", Icon = IconName.Notification, Description = "My profile notifications"},
        new DrawerItem {Text = "Calendar", Icon = IconName.Calendar, Description = "My events"},
    };

    public string GetSelectedItemClass(DrawerItem item)
    {
        if (SelectedItem == null) return string.Empty;
        return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "text-info" : "";
    }

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

The result of the code snippet above

drawer template example

See Also

In this article
Not finding the help you need? Improve this article