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

Scrolling a Selected Item into View in the Drawer

Updated on Oct 28, 2026

Environment

Product

Progress® Kendo UI® for Angular Drawer

Description

I want to select a specific item in the Drawer and scroll to it when the items do not fit in the available height. The selected item must be visible to the user.

This Knowledge Base article also answers the following questions:

How can I scroll to an item in the Angular Drawer?
Does the Drawer have a scrollTo method?
How can I make a programmatically selected Drawer item visible?

The Drawer does not scroll automatically when you select an item, and it does not provide a scrollTo method. To reveal the selected item, scroll it into view with the browser API after the Drawer updates.

The following example demonstrates a Drawer with 30 items. Each button selects an item and scrolls the Drawer to it.

Loading ...

To implement the approach in your application:

Set a fixed height to the Drawer container so that the Drawer items overflow and the Drawer renders a scrollbar.
css
```
.container {
    height: 250px;
}
```

Add an item-specific class through the cssClass property of each DrawerItem, for example, drawer-item-25.

public items: DrawerItem[] = Array.from({ length: 30 }, (_, index) => ({
    id: index + 1,
    text: `Item ${index + 1}`,
    cssClass: `drawer-item-${index + 1}`,
    selected: index === 0
}));

To select an item programmatically, update the items collection and set the selected property of the target item to true.
TS
```
this.items = this.items.map((item) => ({ ...item, selected: item.id === id }));
```

After the next render, find the item by its class in the Drawer element and call its scrollIntoView method.

afterNextRender(
    () => {
        this.drawer().nativeElement.querySelector(`.drawer-item-${id}`)?.scrollIntoView({ block: 'nearest' });
    },
    { injector: this.injector }
);

Scrolling a Selected Item into View in the Drawer

Environment

Description

Solution

See Also