This is a migrated thread and some comments may be shown as answers.

Drawer Separator

3 Answers 674 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
Twain
Top achievements
Rank 1
Twain asked on 12 Feb 2021, 05:00 PM

Hi, 

I'm trying to add a Separator to a TelerikDrawer but it doesn't work as is expected: no separator is added. Instead, an common item is shown that when clicked, an exception is thrown.

I'm using the default DrawerItem class definition. Here is my code: 

 

public class DrawerItem
{
    public string Text { get; set; }
    public string Url { get; set; }
    public string Icon { get; set; }
    public bool IsSeparator { get; set; }
}
 
/* Items */
public List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
{
    new DrawerItem { Text = "System Overview", Url = Constants.Navigation.HOME, Icon = "toggle-full-screen-mode" },
    new DrawerItem { IsSeparator = true, Url = string.Empty }, // --> don't work
    new DrawerItem { Text = "Add Container", Url = Constants.Navigation.CONTAINERFORM, Icon = "plus-outline" },
    new DrawerItem { Text = "Show App Logs", Url = Constants.Navigation.LOGMONITOR, Icon = "paste-plain-text"},
    new DrawerItem { Text = "Options", Url = Constants.Navigation.OPTIONS, Icon = "gear"}
};
 
/* Drawer component definition */
 
    <TelerikDrawer Data="@NavigablePages" @bind-Expanded="@DrawerExpanded" MiniMode="true" Mode="@DrawerMode.Push"
                   @ref="@DrawerRef" @bind-SelectedItem="@SelectedItem" Width="auto">
        <Template>
            <div class="k-drawer-items">
                <ul>
                    @foreach (var item in NavigablePages)
                    {
                        @* stop the propagation of the onclick event to prevent the drawer from collapsing *@
                        @* Use onclick to handle manual item selection and toggle the selected class *@
                        <li @onclick:stopPropagation
                            @onclick="@(() => SelectAndNavigate(item))"
                            class="k-drawer-item @GetSelectedItemClass(item)"
                            style="white-space:nowrap">
                            <span class="k-icon k-i-@item.Icon" style="margin-right: 8px;"></span>
                            @if (DrawerExpanded)
                            {
                                <span class="k-item-text">@item.Text</span>
                            }
                        </li>
                    }
                </ul>
            </div>
        </Template>
        <Content>
            @Body
        </Content>
    </TelerikDrawer>

 

Any suggestion on what's going on? 

Thanks. 
Twain.

3 Answers, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 16 Feb 2021, 02:11 PM

Hello Marcos,

When using Drawer Template the built-in features of the drawer are disabled and should be handled by the application.

The drawer will expand and collapse as usual, but the content has to be controlled by the application entirely, including the separator.

If you want to use the built-in Drawer functionalities, you should stick to the default structure of the Drawer. An example of a Drawer with separator you can find in this article for Drawer as Navigation.

In the meantime, if you want to use a Template, the application should be modified to handle the customization you need - for example, separator could be managed by some custom CSS (this article might be helpful to easily find the relevant elements in the DOM. The Drawer also has a Class parameter which you can use to add custom CSS class and set a stronger selector).

Regarding the exception, as you've mentioned that it is thrown on click, one possible reason behind this could stem from the SelectAndNavigate method - for example the item it accepts does not have url defined and the page cannot be navigated to.

If you have tried all of the above options and you are still experiencing some difficulties, you can send us a runnable example where the issue is reproduced, so we can investigate further and provide a solution.

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Twain
Top achievements
Rank 1
answered on 16 Feb 2021, 07:53 PM
Hi Nadezhda.
I've modified the template to avoid the propagation of the event that collapse the drawer when an item in pressed. So, in order to keep this I'll have to take the manually approach and create the separator myself.
Thanks you very much for you answer.
Regards.
0
Nadezhda Tacheva
Telerik team
answered on 18 Feb 2021, 09:42 AM

Hi Marcos,

I'm glad you've managed to resolve it.

If any additional questions appear, please do not hesitate to contact us.

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Drawer
Asked by
Twain
Top achievements
Rank 1
Answers by
Nadezhda Tacheva
Telerik team
Twain
Top achievements
Rank 1
Share this question
or