Hierarchical drawer with non-selectable parents

[Kristof]

Hi,

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>

    </div>

  </ng-template>

 

(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?

 

thx

[Georgi]

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.

Regards,
Georgi
Progress Telerik