I'm having trouble with data binding in the drawer component. In order to help isolate + demonstrate the issue I've created a simple test page containing a drawer component with minimal configuration:-

@layout TelerikLayout
@page "/test"

<TelerikDrawer @bind-SelectedItem="SelectedItem"
               Data="Data">
    <DrawerContent><p>Hello</p></DrawerContent>
</TelerikDrawer>

@code {
    private class DrawerItem
    {
        public FontIcon Icon { get; set; }
        public bool Separator { get; set; }
        public string Text { get; set; }
        public string Url { get; set; }
    }

    private List<DrawerItem> Data { get; set; } = new List<DrawerItem> { new DrawerItem { Icon = FontIcon.CaretTr, Text = "Hello" } };

    private DrawerItem? SelectedItem { get; set; }
}

And here is the resulting markup. The drawer component is rendered and so is the drawer content, but no drawer items:-

<div class="k-drawer-container k-drawer-overlay"><!--!-->
<!--!-->
    <div class="k-drawer telerik-blazor k-drawer-start" data-id="2ccfd37c-d109-485f-80e7-654bf55cb5c7" dir="ltr"><!--!-->

        <!--!--><!--!-->

        <div class="k-drawer-wrapper" style="width: 0; transition-duration: 0ms;"><!--!-->
        </div><!--!-->
    </div><!--!-->
    <div class="k-drawer-content"><!--!-->
<!--!--><p>Hello</p>    </div><!--!-->
</div>

I've tried using IEnumerable instead of List, making SelectedItem not nullable, and removing SelectedItem altogether, and the result is the same. I'm on Telerik UI for Blazor version 8.1.1 and all other components appear to be working fine. Any help would be appreciated.

Hy,

I'm using a hierarchical drawer following  the example: Blazor Drawer Demos - Hierarchical Drawer | Telerik UI for Blazor

If I activate the mini mode the hierarchical drawer appears as follows:

Is there something in the component where the drawer in mini mode displays all the items of the next levels in a popup that opens and closes when the cursor goes over the item at level 0? 

As the picture below

Thanks

Hello,

I've been unsuccessful in styling the Drawer's scrollbar with CSS. Can someone provide an example of how to change the scrollbar style please?

Thanks

Hi, my application layout has 2 default drawer (left one as Push and Right one as Overlay).

To handle this layout i used the suggestion on:

https://www.telerik.com/forums/nested-drawer-for-menu-on-left-and-right

The application is managed with this gerarchy:

- Right drawer

- Left drawer inside right drawer content

- Application components inside Left drawer content

Now i need a side panel inside of some application compoents: note who i don't need menu items, but only a side panel with a custom component on it, but i have not found a telerik component to handle it.

There is a telerik component to handle an overlay side panel (other than TelerikDrawer)? 

I tried to add another TelerikDrawer with a custom template, but is seem not working.

Adding a Drawer in one of my application components result in unexpected behaviour: the left drawer is rendered on the right side of the screen.

Any suggestion? thanks

Good evening.

I would like to word wrap the text in the drawer component, this is an example where I would like the wrap (see the first row in which I've added more text to show the ellipses):

https://blazorrepl.telerik.com/mSEjwWvZ12HeWVRp26

May you kindly help me?

Thank you.

Blazor C# .Net

I have a vertical bar chart.  The bars represent colors so the labels are like "red", "blue"...

Every time I do a search on the database the color count and values change. Like next time it will be "Yellow", "red"...

I want to draw the labels my self and have the colors as little squares under the name of the color.

Like get from where I am...

to labels like

I tried ChildContent on the ChartCategoryAxis but my function void CustomColorLabelDraw(RenderTreeBuilder builder) does not get the index of the tick, and does not get called as many times as there are bars, and the output if I return a AddMarkupContent of "My test string" ends up above the entire chart and outside the chart.

How does on use a C# function to generate the HTML to render a tick label?

 See that popup hint when the user has eht emouse over the draweritem, [Products], had this working fine in the net6 version of the app. But on converting to .net8 it appears to have stopped working.

Do I need to do somethign different? I cant find any simple examples of gettign this to work.

Code I have:

@inject NavigationManager NavigationManager

<TelerikTooltip TargetSelector=".k-drawer-items span.k-icon[title]" />

<div class="drawer-container">
    <div class="custom-toolbar">
        <TelerikButton OnClick="@ToggleDrawer"
                       Icon="@FontIcon.Menu"
                       FillMode="@(ThemeConstants.Button.FillMode.Flat)">
        </TelerikButton>
        <span class="mail-box">@strAppName</span>
    </div>

    <TelerikDrawer @ref="@Drawer"
                   Data="Data"
                   MiniMode="true"
                   Mode="@DrawerMode.Push"
                   TItem="DrawerItem"
                   SelectedItemChanged="@OnItemSelect"
                   @bind-Expanded="@Expanded">
        <Template>
            <div class="k-drawer-items" role="menubar" aria-orientation="vertical">
                <ul>
                    @foreach (var item in context)
                    {
                        var selectedClass = item == SelectedItem ? "k-selected" : string.Empty;

                        <li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass k-level-@(item.Level)">
                            <TelerikSvgIcon Icon="@item.Icon"></TelerikSvgIcon>
                            <span class="k-item-text">@item.Text</span>
                            <span class="k-icon k-font-icon k-i-@item.Icon" title="@item.Title"></span>

                            @if (item.Expanded && (item.Children?.Any() ?? false))
                            {
                                <TelerikSvgIcon Class="drawer-chevron-icon" Icon="@SvgIcon.ChevronDown" />
                            }
                            else if (!item.Expanded && (item.Children?.Any() ?? false))
                            {
                                <TelerikSvgIcon Class="drawer-chevron-icon" Icon="@SvgIcon.ChevronRight" />
                            }
                        </li>
                    }
                </ul>
            </div>
        </Template>
    </TelerikDrawer>
</div>


<style>

    .sidebar {
        background-image: none !important;
    }

    .drawer-container {
        /* margin: 30px auto;*/
        width: 100% !important; /*100%*/
    }

    .k-drawer-container {
        position: relative;
        width: 100%;
    }

    .custom-toolbar {
        width: @strAppNameWidth;
        background-color: #f6f6f6;
        line-height: 49px;
        border-bottom: inset;
        border-bottom-width: 1px;
        padding: 3px 8px;
        color: #656565;
    }

    .mail-box {
        margin-left: 20px;
        font-weight: bold;
        font-size: 17px;
    }

    .page ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .page li:last-child {
        border: 0;
    }

    .page li h6 {
        border-bottom: none;
        padding-bottom: 8px;
    }


    .k-drawer-content {
        padding: 25px;
        font-size: 18px;
    }

    .k-d-level {
        display: flex;
    }

    .drawer-chevron-icon {
        position: absolute;
        right: 0;
        line-height: inherit;
        margin: 0 8px
    }

</style>

As far as I can tell this line: <span class="k-icon k-font-icon k-i-@item.Icon" title="@item.Title"></span>

Should be doing the work of showing the Hint whcih I am putting in title in code behind.

example:

new List<DrawerItem>
{
    new DrawerItem
    {
        Title = "Home",
        Text = "Home",
        Icon = SvgIcon.Home,
        Url="./"
    },
    new DrawerItem
    {
        Title = "Management",
        Text = "Management",
        Icon = SvgIcon.DataSds,
        Url="Management"
    },
    new DrawerItem
    {
        Title = "Products",
        Text = "Products",
        Icon = SvgIcon.BuildingBlocks,
        Url="Products"
    },

Any suggestions pointers as to what I am doing incorrectly?

Thanks

Deasun.

When using Mini Mode for the Telerik Drawer, is there a way to make the Telerik Drawer expand/close with the @onmouseenter and @onmouseleave events?

I have the following layout...

<TelerikDrawer Data="@DrawerItems"
			   MiniMode="true"
			   Mode="@DrawerMode.Push"
			   SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
			   @ref="@DrawerRef"
			   Class="my-drawer">
	<ItemTemplate Context="item">
		<span class="icon-container drawer-tooltip-target" title=@item.Text>
			<TelerikSvgIcon Icon="@item.Icon" Class="drawer-icon" />
		</span>
		<span class="k-item-text">@item.Text</span>
	</ItemTemplate>
	<DrawerContent>
		<div class="content">
			@Body
		</div>
	</DrawerContent>
</TelerikDrawer>

I tried the following...

<TelerikDrawer Data="@DrawerItems"
			   MiniMode="true"
			   Mode="@DrawerMode.Push"
			   SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
			   @ref="@DrawerRef"
			   Class="my-drawer">
	<ItemTemplate Context="item">
		<div @onmouseenter="() => DrawerRef.ExpandAsync()"
			 @onmouseleave="() => DrawerRef.CollapseAsync()">
			<span class="icon-container drawer-tooltip-target" title=@item.Text>
				<TelerikSvgIcon Icon="@item.Icon" Class="drawer-icon" />
			</span>
			<span class="k-item-text">@item.Text</span>
		</div>
	</ItemTemplate>
	<DrawerContent>
		<div class="content">
			@Body
		</div>
	</DrawerContent>
</TelerikDrawer>

But that affects the layout as shown below, and does not appear to fully wrap the Drawer which causes the expand/collapse to be bit twitchy.

It also appears that I'm unable to attach @onmouse events to the <ItemTemplate> tag ( I get an unrecognized attribute error).

Any ideas?

I have the below code that I was  hoping would show the hint above the {getting Started] drawer item when user puts mouse over it.

But to no hope. :( didnt work.

What am I doing wrong?