You can trigger the animation for the Drawer component by calling ToggleAsync() on the reference to the Drawer component:
<TelerikButton OnClick="@(async Task () => await DrawerRef!.ToggleAsync())" />
However, when you toggle the Expanded parameter instead, it still toggles the Drawer but does not trigger the animation:
<TelerikButton OnClick="@(() => Expanded = !Expanded)" />
As a result, if I want the Drawer component to be expanded by default, but I still want the user to be able to toggle it, I have to call ToggleAsync() on the reference to the component and bind the Expanded parameter, which is unnecessary verbose for such a common scenario:
<TelerikDrawer TItem="int" @ref="@DrawerRef" @bind-Expanded="@DrawerExpanded" Mode="@DrawerMode.Push">
<Template>
<NavMenu/>
</Template>
<DrawerContent>
@Body
</DrawerContent>
</TelerikDrawer>
@code
{
private TelerikDrawer<int>? DrawerRef { get; set; }
private bool DrawerExpanded { get; set; } = true;
/// <remarks>
/// We can't toggle DrawerExpanded because that won't trigger the animation.
/// Only DrawerRef.ToggleAsync() triggers the animation.
/// </remarks>
private async Task ToggleDrawer() => await DrawerRef!.ToggleAsync();
}
I would like to trigger the animation for the Drawer component by toggling the Expanded parameter and not calling ToggleAsync() on the reference to the Drawer component. Toggling the Expanded parameter instead of calling a function on a reference to a component is a cleaner, simpler approach that better aligns with the philosophy of Blazor (using parameters rather than properties or functions on reference to components). Furthermore, this approach is used by various other Blazor component libraries such as MudBlazor, SyncFusion, and DevExpress. See:
I would like to be able to create Drawer Items in markup, not programmatically in code. Similar to https://feedback.telerik.com/blazor/1433539-declare-the-menu-items-in-markup-without-code. Ideally, I would like to have an implementation similar to MudBlazor's Drawer: https://www.mudblazor.com/components/drawer#usage.
Example:
<TelerikDrawer>
<DrawerSidebar>
<DrawerItem>
<NavLink />
</DrawerItem>
<DrawerItem>
<NavLink />
</DrawerItem>
</DrawerSidebar>
<DrawerContent>
@Body
</DrawerContent>
</TelerikDrawer>
Alternative Example:
<TelerikDrawer>
<TelerikMenu />
</TelerikDrawer>
I see that we can create Hierarchical Drawers by using the Template: Blazor Drawer Demos - Hierarchical Drawer | Telerik UI for Blazor.
However, implementing a Hierarchical Drawer through the Template is very verbose, complicated, and takes time to setup. This slows down initial development and future maintenance. With how common hierarchical sidebar menus are, I think there is significant value in updating the Telerik Drawer component to render hierarchical sidebar menus without the need to configure the Template or add other code.
Overall, I would like the Telerik Drawer component to automatically render a hierarchical sidebar menu by only passing in hierarchical data into the Data parameter and not having to configure the Template or provide additional code. Looking at MudBlazor's Navigation Menu component, they provide support for hierarchical sidebar menus up to four levels without any extra configuration.
Generally, I would expect Templates of components to only be necessary in uncommon scenarios. I would not consider hierarchical sidebar menus uncommon.
Hello,
I would like to add a CSS-Class to some items in my TelerikDrawer control. Since the ItemTemplate only controls the contents and the Template is overkill as it overrides the rendering for the entire drawer contents, I was wondering whether there was any support for adding custom CSS classes to items (similar to how it is described for Angular here: https://www.telerik.com/kendo-angular-ui/components/layout/drawer/items/).
TIA
- Chris
Drawer component does not have a persist content option (e.g. PersistDrawerContent="true")
I believe the drawer component should have the same feature as Tabstrip PersistTabContent="true"
It would be nice to have a handle feature within the rendered Drawer component that would expand and collapse the component.
For example, see the following screenshots.
Hi,
could you add an Enabled Parameter (like in the Button Component) to the default databound values from a Drawer Item?
Of course I can handle this with a template, but actually I dont like to implement the whole item behaviour and the looks.
Ok, I a little bit lazy, but I think this would be a find addition to the feature set.
Best regards
Christian
Mini mode is very useful for conserving valuable screen estate but with the drawer in mini mode the user only sees a group of icons.
How can I add a mouse-over/hover descriptive text for each of the mini-mode icons so that users don't have to expand the menu to see the one that they want? I really don't want to resort to jQuery but this is an example where it may be the only solution.
The Drawer component is excellent BTW.
Kind regards,
Paul