Questions on UI for Blazor Forum

1 answer

8 views

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?

<TelerikTooltip TargetSelector=".k-drawer-items span.icon-container[title]" />
<TelerikDrawer @ref="@Drawer" Data="Data" MiniMode="false" 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="icon-container" title="@item.Title"></span>
                        <span class="k-item-text">@item.Text</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>
    <DrawerContent>
        @SelectedItem?.Description
    </DrawerContent>
</TelerikDrawer>
@code {
    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool Expanded { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } =
    new List<DrawerItem>
    {
            new DrawerItem
            {
                Title = "Well hello there!",
                Text = "Getting Started",
                Icon = SvgIcon.QuestionCircle,
                Description = "The Blazor framework by Microsoft allows you to create web applications with .NET and C# to create front-end. The Telerik® UI for Blazor components facilitate the front-end development by providing you with ready made UI components."
            },
            new DrawerItem
            {
                Text = "Components",
                Icon = SvgIcon.Categorize,
                Description = "Blazor is still a new technology and the component suite is young. We are constantly working on adding new features and components. Tell us which components you want implemented and how you intend to use them, and Blazor, at our feedback portal.",
                Children = new List<DrawerItem>()
                {
                    new DrawerItem
                    {
                        Text = "Grid",
                        Icon = SvgIcon.Grid,
                        Level = 1,
                        Description = "The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation and accessibility support." },
                    new DrawerItem
                    {
                        Text = "Calendar",
                        Icon = SvgIcon.CalendarDate,
                        Level = 1,
                        Description = "The Calendar component allows the user to scroll through a calendar and select one or more dates. "
                    },
                    new DrawerItem
                    {
                        Text = "Menu",
                        Icon = SvgIcon.Menu,
                        Level = 1,
                        Description = "The Menu component displays data (flat or hierarchical) in a traditional menu-like structure."
                    },
                }
            },
            new DrawerItem
            {
                Text = "Browser Support",
                Icon = SvgIcon.Calendar,
                Description = "Browsers supported by Telerik UI for Blazor: Chrome (including Android and iOS), Edge, Firefox, Safari (including iOS)"
            }
        };
    public async Task ToggleDrawer() => await Drawer.ToggleAsync();
    protected override void OnInitialized()
    {
        SelectedItem = Data.First();
    }
    public void OnItemSelect(DrawerItem selectedItem)
    {
        SelectedItem = selectedItem;
        selectedItem.Expanded = !selectedItem.Expanded;
        var newData = new List<DrawerItem>();
        foreach (var item in Data.Where(x => x.Level <= selectedItem.Level))
        {
            newData.Add(item);
            if (item == selectedItem && selectedItem.Expanded && (item.Children?.Any() ?? false))
            {
                foreach (var child in item.Children)
                {
                    newData.Add(child);
                }
            }
            if (item != selectedItem && !(item.Children?.Contains(selectedItem) ?? false))
            {
                item.Expanded = false;
            }
        }
        Data = newData;
    }
    public class DrawerItem
    {
         public string Title { get; set; }
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
        public bool Expanded { get; set; }
        public int Level { get; set; }
        public string Description { get; set; }
        public IEnumerable<DrawerItem> Children { get; set; }
    }
}
 

Drawer

answered on 19 Apr 2024

1 answer

6 views

Drawer Mini Mode Width - blazor

Hi, is there a override for Drawer Width when in Mini Mode.
I wanted to increase the size of my Icons outside of the default 50px.

Thanks!

Drawer

answered on 18 Apr 2024

1 answer

41 views

How to toggle drawer OnClick from another razor file?

Hello,

Am trying to toggle the drawer component from a separate razor file.

I have two razor files in the following directories:

\Components\Layout\SiteHeader\SiteHeader.razor

\Components\Pages\Home.razor

If Home.razor contains the default Drawer code:

@* This example shows the basic configuration of the Drawer and how to expand or collapse a Drawer with a click of a button. *@

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
               Icon="@SvgIcon.Menu">
    Toggle drawer
</TelerikButton>

<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
               @ref="@DrawerRef">
    <DrawerContent>lorem ipsum</DrawerContent>
</TelerikDrawer>

@code {
    Telerik.Blazor.Components.TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            {
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
            };

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

If however I waned to move only the button portion to the SiteHeader.razor file

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
               Icon="@SvgIcon.Menu">
    Toggle drawer
</TelerikButton>

How can I get access to the

DrawerRef

So that I can toggle from SiteHeader.razor

Is this possible?

Thanks

Any help be appreciated

Thanks

Drawer

answered on 19 Feb 2024

1 answer

35 views

Telerik Drawer items text clipped at 240px

We are start using Blazor in a major redevelopment of our Angular App.
We are looking at the Drawer to create a side navigation component that will display Hierarchical data.
At the moment with just two levels the description of the items is clipped and shows the three dots at the end e.g. "Financial Comparis..."
How do I resize the drawer sidebar width to more than the default 240px so that text is not clipped and ends with ....?

Drawer

answered on 20 Dec 2023

1 answer

49 views

TelerikMediaQuery - Add support for container queries

I find myself using css container queries a lot in conjunction with the TelerikDrawer. I would really like to be able to use the MediaQuery control to set parameters based on the container size instead of the screen size.

Drawer

MediaQuery

answered on 10 Nov 2023

2 answers

109 views

How can I have a drawer that is always expanded?

I set

Expanded="true"

but after I select the second item in the drawer it collapses. Here is my code for the drawer:

<TelerikDrawer Data="@pageData"
               SelectedItem="selectedItem"
               Mode="@DrawerMode.Push"
               Expanded="true"
               MiniMode=true
               SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))">
    <DrawerContent>
        @{
            if (selectedItem is not null)
            {
                <AdAccount AdAccountDisplayItem="@adAccountDI" />
            }
        }
    </DrawerContent>
</TelerikDrawer>

Drawer

answered on 14 Sep 2023

3 answers

985 views

How to set the Drawer sidebar, when I scroll it disappears and goes up?

Hello how are you, I have a problem, I guess it's simple, but my css level is low and I don't know how to set the Drawer sidebar, when I scroll it disappears and goes up.

I did this to put a sticky on a div that contains it but it doesn't work, it keeps failing.
I do it this:

<div class="sticky-sidebar">
    <TelerikDrawer ... >
        <!-- El contenido de tu Drawer aquí -->
    </TelerikDrawer>
</div>

and this:

.sticky-sidebar {
    position: sticky;
    top: 0;
    height: 100vh; /* Esto asegura que el contenedor ocupe toda la altura de la vista */
    overflow-y: auto; /* Esto permite que el contenido dentro del contenedor se desplace */
}

The result is this:

This is my MainLaout.razor

@*Encabezado*@
<div class="custom-toolbar top-row" style="display: flex; justify-content: space-between; z-index:200">
    <div class="boton_y_logo" style="white-space:nowrap; ">
        <TelerikButton Class="hamburguer-button" OnClick="@( () => Drawer.ToggleAsync() )"></TelerikButton>
        <img src="/logo.jpg" alt="Logo de xxx" style="width: 150px; height: 40px; margin-left: 0px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); line-height:40px" />
        <span class="item_seleccionado">@SelectedItem?.Text</span>
    </div>   
</div>

<div class="sticky-sidebar">
<TelerikDrawer Data="@Data"
               Class="my-drawer"
               @bind-Expanded="@Expanded"
               MiniMode="false"
               Mode="@DrawerMode.Push"
               @ref="@this.Drawer"
               @bind-SelectedItem="@SelectedItem">
    
    <Template>
        <div class="k-drawer-items" role="menubar" aria-orientation="vertical"></div>
    </Template>
    <DrawerContent>
        <div class="main">
            <div class="content px-4">
                @Body
            </div>
        </div>
    </DrawerContent>
</TelerikDrawer>
</div>
@code {
    
}

and this is my site.css

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px2pxrgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem1.25rem0.7rem1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui.dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a064770%);
}

.top-row {
    background-color: rgb(37, 40, 55) !important;
    box-shadow: 02px4pxrgba(0, 0, 0, 0.4);
    /*border-bottom: 0px solid #d6d5d5;*/justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    /*left: 0;*/
}

    .top-row ::deep a, .top-row .btn-link {
        white-space: nowrap;
        /*margin-left: 1.5rem;*/
    }

    .top-rowa:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        /*margin-right: 10px*/
    }
/* Estilos para modo celular */@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-rowa, .top-row.btn-link {
        margin-left: 0;
    }


}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div {
        padding-left: 2rem!important;
        padding-right: 1.5rem!important;
    }
}
/*extra cc*/.k-icon {
    font-size: 20px;
}

.custom-toolbar {
    width: 100%;
    line-height: 10px;
    border-bottom: inset;
    border-bottom-width: 1px;
    padding: 3px8px;
    color: #a1a1a1;
    background-color: #252837!important;
    height: 50px;
    box-shadow: 02px4pxrgba(0, 0, 0, 0.4);
    align-content: center;
    align-items: center;
    text-decoration: none;
    position: sticky;
    top: 0;
}

.item_seleccionado {
    margin-left: 20px;
    font-weight: bold;
    font-size: 17px;
    width: 100%;
}
/*Dimensiones de controles*/.margenlados5px {
    margin: 5px;
}

.Altura_total {
    height: 100%;
}

/*íconos de header*/.hamburguer-button {
    width: 2rem;
    height: 2rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.75;
    mask-image: url("../icons/icons8-menu-24.png");
    -webkit-mask-image: url("../icons/icons8-menu-24.png");
    margin-right: 5px;
    color: white;
}

.tb-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-settings {
    mask-image: url("../icons/setting.png");
    -webkit-mask-image: url("../icons/setting.png");
    color: aliceblue;
}

.tb-icon-maximizar {
    mask-image: url("../icons/maximizar.png");
    -webkit-mask-image: url("../icons/maximizar.png");
    color: aliceblue;
}

.tb-icon-info_grid {
    mask-image: url("../icons/informacion.png");
    -webkit-mask-image: url("../icons/informacion.png");
    opacity: 1;
    color: black;
}



.tb-icon-logo {
    mask-image: url("../icons/maximizar.png");
    -webkit-mask-image: url("../icons/maximizar.png");
    color: aliceblue;
}

.tb-icon-refresh {
    mask-image: url("../icons/refresh.png");
    -webkit-mask-image: url("../icons/refresh.png");
    color: aliceblue;
}


/*fullscreen f11*/
*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
    overflow: auto !important;
}

.drawer-container {
    width: 100%;
    height: 100%;
}

.borde_cero {
    margin: 0;
    padding: 0;
}


.texto_drawer {
    font-size: 10px;
}

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

.texto_body {
    font-size: 14px;
}

.item-descr-wrap > span {
    font-size: 70%;
}

.item-descr-wrap {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
/*copiado de host*/.k-drawer-content {
    overflow-x: auto;
}


.drawer-hamburger {
    position: absolute;
    z-index: 2;
    margin-top: 13px;
    margin-left: 30px;
}

.k-drawer-item:hover, .k-drawer-item.k-state-hover, .text-info {
    color: #281f3eb3!important;
    background-color: #ff6358;
}



/*colores defs fondo symbol texto de drawer*/.my-drawer.k-drawer {
    background-color: #252837;
    color: white;
    z-index: 0;
    height:100%;

}

.my-drawer.k-drawer-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    
}
    .my-drawer.k-drawer-item:hover {
        background-color: #414762;
        color: antiquewhite !important;
    }
/*cuadros en ítem principales*/.k-drawer-item-main {
    box-sizing: border-box;
    padding: 2px;
    /*border: 1px solid #000;*/background-color: #1e3548;
}
.sticky-sidebar {
    position: sticky;
    top: 0;
    height: 100vh; /* Esto asegura que el contenedor ocupe toda la altura de la vista */
    overflow-y: auto; /* Esto permite que el contenido dentro del contenedor se desplace */
}

Please, how to set the Drawer sidebar, when I scroll it disappears and goes up?

thanks.

Drawer

answered on 20 Jul 2023

0 answers

66 views

Hierarchical drawer navigation

Hi, I'm using Hierarchical Drawer with children & navigation and I'm following this docs: https://demos.telerik.com/blazor-ui/drawer/hierarchical-drawer. I want when I click on DrawerItem, it will navigate to blazor component. I don't know where to put navigate function on. Do you have any suggestions? Thanks in advance.

Drawer

updated question on 28 Jun 2023

1 answer

72 views

Drawer submenus?

I have a need for the navmenu to be like;

Option1

Option2

Option2-Subopt1

Option2-Subopt2

Then when user clicks on Option2-Subopt1 or Option2-Subopt2 it navigates to the page.

Example:

public IEnumerable<DrawerItem> Data { get; set; } =
            new List<DrawerItem>
                    {
            new DrawerItem
            {
                Title = "Home",
                Text = "Home",
                Icon = "home",
                Url="./"
            },
            new DrawerItem { Separator = true},
            new DrawerItem
            {
                Title = "General Search",
                Text = "General Search",
                Icon = "search",
                Url="GeneralSearch"
            },

etc....

If I want to say give users 2 search options under general search, How would I set that up?

Drawer

answered on 24 Feb 2023

1 answer

48 views

Hierarchical Nodes & Identity Roles

We are looking at swapping out the SyncFusion Sidebar for the Telerik Drawer. Currently, we use the Sidebar to hold a Telerik Treeview. This has become unwieldy as more nodes have been added and managing the Responsive needs. We just can't seem to get the right balance between the Treeview on the desktop browser and the mobile browser.

So a few quick questions:

It would appear that the Drawer would accomplish both of these tasks. Correct?
If the above is correct, can we have more than one node expanded or does it always close the last selected node like in the demo?
Can we apply code to show/hide the node based on Security (Identity) Roles?
Lastly, can we search the drawer for a node? For example, right now we have a Search box allowing the user to quickly type for a menu item.

Thank you!

Drawer