drawer template collapse arrow

[Richard]

Hi All,

I have a drawer component set up as my application's side bar navigation.  I am using a kendoDrawerItemTemplate to allow some customisation of the menu items' appearances.

If I don't use kendoDrawerItemTemplate and just leave the default styling, when an item has children I get the collapse arrow to expand and contract the level.  When using the kendoDrawerItemTemplate I would obviously need to include this, I can't find anything in the docs about how to pull this bit in.

I have something like this:

<ng-template kendoDrawerItemTemplate let-item let-level="level">
        <div
          style="
            display: flex;
            align-items: center;
            padding-bottom: 3px;
            padding-top: 3px;
          "
        >
          <span
            [ngClass]="'k-icon ' + item.icon"
            [themeColor]="primary"
            size="medium"
          ></span>
          <span class="k-item-text">{{ item.text }}</span>
          <span
            *ngIf="item.children"
            class="k-icon k-panelbar-expand k-i-arrow-60-down"
          ></span>
        </div>
      </ng-template>

The span with the *ngIf children I know is wrong but it is there that I want to pull in the component / code for the arrow if possible.

 

Does anyone know the answer as to how I achieve this?

 

Many Thanks,

[Richard]

Solved it, there may be an inbuilt way but I just added a property called "childrenExpanded" to the item and switch between two spans.

 

<span
            *ngIf="item.children && expanded && item.childrenExpanded"
            class="k-icon k-panelbar-expand k-i-arrow-60-up"
            style="flex: 0 0 auto; text-align: right"
          ></span>
          <span
            *ngIf="item.children && expanded && !item.childrenExpanded"
            class="k-icon k-panelbar-expand k-i-arrow-60-down"
            style="flex: 0 0 auto; text-align: right"
          ></span>

My function for "onSelect" handles changing this boolean value:

  public onSelect(ev: DrawerSelectEvent): void {
    const current = ev.item;

    if (current.children && current.children.length > 0) {
      if (this.expandedIndices.indexOf(current.id) >= 0) {
        // collapse menu?
        current.childrenExpanded = false;
        this.expandedIndices = this.expandedIndices.filter(
          (id) => id !== current.id
        );
      } else {
        // expand menu?
        current.childrenExpanded = true;
        this.expandedIndices.push(current.id);
      }
    } else {
      this.selected = current.text;
      this.router.navigate([ev.item.path]);
    }

    if (!this.expanded) {
      this.expanded = true;
    }
  }

The last if statement just expands the whole side nav if a user selects a drop down