I'm trying to replicate what I believe is a tabstrip menu display (not the best description).

I've attached a sample of what I'm trying to do.  Basically, when a menu item is selected, a new windows in the viewport is opened and the page is displayed there.  Multiple pages can be opened when selecting menu items. 

Clicking the X on the left would close all open windows.  Home would be always displayed.

Is this done with Tabstrip or some other component?

hi

‫I am using a TelerikDrawer in Push mode with MiniMode="true", but I could not find a way to control how fast it opens and closes.

Here is my code:
<style>

    .k-drawer .k-drawer-wrapper,
    .k-drawer-wrapperr {
        overflow-y: scroll;
        scrollbar-width: none; 
    }


    .k-drawer-mini .k-drawer .k-drawer-wrapper {
        width: 46px;
    }


    .k-drawer-mini .k-drawer.k-drawer-end,
    .k-drawer-expanded .k-drawer.k-drawer-end {
        border-inline-start-width: 0px;
    }


    .k-drawer-push .k-drawer {
        height: calc(100vh - 24px - 24px) !important;
    }

    .k-drawer-content {
        height: calc(100vh - 24px - 24px) !important;
        margin: 0px !important;
        padding: 0px !important;
        max-width: 100% !important;
        background-color: darkolivegreen;
    }





    .k-drawer-container {
        display: flex !important;
    }

    .k-drawer-content {
        flex: 1;
        overflow: hidden;
    }


    .k-drawer-end {
        box-sizing: border-box;
    }




    .k-drawer,
    .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important;
    }

    .k-drawer-container,
    .k-drawer-container .k-drawer,
    .k-drawer-container .k-drawer-wrapper,
    .k-drawer-container .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important; 
    }

    .k-drawer,
    .k-drawer .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

</style>



<TelerikRootComponent EnableRtl="true">

    <TAppBar  />



    <TelerikDrawer @ref="@Drawer"
                   Position="@DrawerPosition.End"
                   MiniMode="true"
                   Mode="@DrawerMode.Push"
                   TItem="DrawerItem"
                   Width="250"
                   @bind-Expanded="@IsSidebarOpen">

        <Template>
            <NewSidbar @bind-IsOpen="@IsSidebarOpen"></NewSidbar>
        </Template>


        <DrawerContent>
            <div style="flex:1;overflow:hidden !important; height:100%">
                <div style="flex:1; overflow:auto; margin: 0px;height:100%">
                    @Body
                </div>
            </div>
        </DrawerContent>

    </TelerikDrawer>

    <FoterLyout></FoterLyout>

</TelerikRootComponent>




@code {

    private bool IsSidebarOpen = true;

    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public bool Expanded { get; set; } = true;
    public class DrawerItem;


}

this CSS not work at all

Does anyone know of a way to dynamically retrieve an SvgIcon from Telerik.SvgIcons by the string name?

I am trying to assign icons to drawer items from looking up string names in a database. I can create an interface that has a custom dictionary that maps strings to icons, but before I did that, I wanted to make sure that there wasn't something already available that I am missing.

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.