New to Kendo UI for Angular? Start a free 30-day trial

Hierarchical Drawer

The Drawer works with a flat structure of items by design. However, many real-world scenarios require navigation with a hierarchical structure.

To achieve this behavior, define parent-child relationships in the Drawer items data. This is demonstrated in the example below.

Example
View Source
Change Theme:

Setup

To achieve a hierarchical items structure, follow the steps below:

  1. Add an id to each item in the Drawer items collection. It is used internally as a unique identifier for each item.

        public items: Array<DrawerItem> = [
            { id: 0, text: 'Inbox', icon: 'k-i-inbox', selected: true },
            { id: 1, text: 'Notifications', icon: 'k-i-bell' }
        ]
  2. To render an item as a nested child of another one, add the parentId field to it. Its value should be the id of the corresponding parent item. It is used internally by the Drawer to map existing parent-child relationships. Items without a parentId field will be rendered as root-level items, and items with a parentId field will be considered nested child items.

    The Drawer supports up to 5 levels of nested items.

        public items: Array<DrawerItem> = [
            { id: 0, text: 'Inbox', icon: 'k-i-inbox', selected: true },
            { id: 1, parentId: 0, text: 'Notifications', icon: 'k-i-bell' }
        ]
  3. Set the isItemExpanded input of the Drawer. It accepts a boolean callback function, which is executed for each Drawer item and determines its expanded state.

    If an isItemExpanded callback is not provided, all Drawer items will be rendered as collapsed. This means that only root level items will be visible.

        // Collection with the indices of all expanded items
        public expandedIndices = [0];
    
        // Predicate function, which determines if an item is expanded
        public isItemExpanded = (item: any): boolean => {
            return this.expandedIndices.indexOf(item.id) >= 0;
        }
  4. Lastly, handle the select event of the Drawer and include the required custom logic for expanding or collapsing the selected item.

        public onSelect(ev: DrawerSelectEvent): void {
            this.selected = ev.item.text;
            const current = ev.item.id;
    
            if (this.expandedIndices.indexOf(current) >= 0) {
                this.expandedIndices = this.expandedIndices.filter(
                    (id) => id !== current
                );
            } else {
                this.expandedIndices.push(current);
            }
        }

In this article

Not finding the help you need?