Hierarchical drawer with non-selectable parents

1 Answer 506 Views
Top achievements
Rank 1
Kristof asked on 02 Jun 2021, 07:14 AM | edited on 02 Jun 2021, 09:09 AM


I want to use the hierarchical drawer example, but I want that parents cannot be selected, only children (leafs) can be selected.

At this moment I am using the hierarchical drawer from the How to section on the kendo UI website, but this allows to select parent items.

This is my item template:

  <ng-template kendoDrawerItemTemplate let-item>
    <div class="k-drawer-link k-drawer-item-level-{{item.level ?? 0}}" [class.k-state-selected-child] = "item.selected && (item.children?.length ?? 0) == 0" [class.k-state-selected-parent] = "item.selected && (item.children?.length ?? 0) > 0">
      <span class="k-icon pr-2" [ngClass]="item.icon"></span>
      <span class="k-drawer-item-level-{{item.level ?? 0}}-text" *ngIf="drawer.expanded && item.translationId" [translate]="item.translationId"></span>
      <span class="k-drawer-item-level-{{item.level ?? 0}}-text" *ngIf="drawer.expanded && !item.translationId">{{ item.text }}</span>
      <span *ngIf="item.expanded && item.children?.length > 0" class="k-icon k-i-arrow-chevron-down" style="margin-left: auto;"></span>
      <span *ngIf="!item.expanded && item.children?.length > 0" class="k-icon k-i-arrow-chevron-right arrow-left" style="margin-left: auto"></span>


(At this moment we are faking the background of the parent items to be white (k-state-selected-parent), but the selected property is still true behind the scenes.)

=> I have troubles, when drawer item 1 is selected, and I expand drawer item 2, the selection dissappear on drawer item 1, because drawer item 2 is selected and expanded. It should only be possible to select drawer item 2.1 or 2.2 (for example) or in other words: expanding a parent may not lead to selection of that parent (to prevent losing the last selected item)

How to achieve this behavior?



1 Answer, 1 is accepted

Sort by
Telerik team
answered on 07 Jun 2021, 05:32 AM

Hi Kristof,

Thank you for getting in touch with us regarding this issue and providing some relevant information.

While disabling parent selection is currently not a feature the Drawer component supports, I was able to play around with our How-to example and achieve something which sounds close enough to what you are looking for.

Here is a runnable demo of the latter.

The example utilizes the fact that the select event of the Drawer is preventable and prevents the selection if the selected item is a parent.

That said, please do bear in mind that any further customization of this configuration would be considered developer effort as it is not an officially supported feature of the component.

I hope that the provided suggestion helps you achieve the desired behavior.

Looking forward to hearing from you.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question