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?
}
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
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>
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>
.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 */ }
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 */
}
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.
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?