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?