Add extra icon in the hierarchical drawer component

Hi Vaishaly,

Thank you very much for the details provided.

From what I understood from your question, you are currently utilizing the Kendo UI for Angular Drawer in its hierarchical format and are looking for an approach to display an additional icon next to the parent items that when clicked prevents their expansion. Please, let me know if I misinterpreted the requirement.

One possible approach to display such an additional icon would be for the developer to utilize the built-in DrawerItemTemplateDirective:

https://www.telerik.com/kendo-angular-ui/components/layout/drawer/templates/#toc-item-template

Having done that, the developer can handle the select event of the Drawer component and thus programmatically determine whether the item should be expanded or not based on the element that has been clicked:

public onSelect(ev: DrawerSelectEvent): void {
    let target: HTMLElement = ev.originalEvent.target;
    this.selected = ev.item.text;
    const current = ev.item.id;

    if (
      target.tagName.toLocaleLowerCase() !== 'kendo-svg-icon' ||
      target.classList.contains('k-svg-i-chevron-down') ||
      target.classList.contains('k-svg-i-calendar')
    ) {
      if (this.expandedIndices.indexOf(current) >= 0) {
        this.expandedIndices = this.expandedIndices.filter(
          (id) => id !== current
        );
      } else {
        this.expandedIndices.push(current);
      }
    }
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-r2cbqn

Please, keep in mind that the demo aims to point the developer in the right direction but might need some additional modifications in order to fit the case-specific requirements which are considered the developer's effort.

I hope this helps.