# Scrolling a Selected Item into View in the Drawer

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>Progress® Kendo UI® for Angular Drawer</td>
</tr>
</tbody>
</table>

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

## Solution

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/drawer-scroll-selected-item-into-view/source.txt)

To implement the approach in your application:

1. Set a fixed height to the Drawer container so that the Drawer items overflow and the Drawer renders a scrollbar.

   ```css
   .container {
       height: 250px;
   }
   ```

2. Add an item-specific class through the [`cssClass`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#cssclass) property of each [`DrawerItem`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem), for example, `drawer-item-25`.

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

3. To select an item programmatically, update the [`items`](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent#items) collection and set the [`selected`](https://www.telerik.com/kendo-angular-ui/components/layout/api/draweritem#selected) property of the target item to `true`.

   ```typescript
   this.items = this.items.map((item) => ({ ...item, selected: item.id === id }));
   ```

4. After the next render, find the item by its class in the Drawer element and call its [`scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method.

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

## See Also

* [Drawer Items](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/items)
* [Drawer Overview](https://www.telerik.com/kendo-angular-ui/components/layout/drawer)
* [DrawerComponent](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent)