How to attach Kendo UI Popup to component
Tags: kendoui, typescript, angular, kendopopup
Published: 2023-10-16 16:31:52

## Preface
This is a step by step guide that shows how to attach the _Kendo Popup_ to the Kendo Dropdown, as by default the Popup is attached to the [very end of the DOM](https://stackoverflow.com/questions/53584403/angular-kendo-popup-element-is-attached-to-very-end-of-dom).

I am writing this guide as I simply could not find one like it and hopefully it might prove useful to at least one other person.

---

## Prerequisites
1. First start a new Angular project by sending the following command line in the terminal:
> `ng new KendoDropDownPopup`

2. Then <u>generate</u> a new angular component called dropdown-list:
> `ng g c dropdown-list`

3. And add the newly generated component into the app.component.html ![Content of app.component.html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puhgvimy05ryuv222g41.png)

4. Finally install kendo-angular-dropdowns:<br>
> `ng add @progress/kendo-angular-dropdowns`

---

## Actual solution

- In the previously <u>generated</u> <mark>dropdown-list.component.ts</mark> add a couple of list options for the dropdown:

```js
  listOptions: string[] = [
    "First option",
    "Second option",
    "Third option"
  ];
```

- In the <mark>dropdown-list.component.html</mark> file add the Kendo Dropdown:

```html
<kendo-dropdownlist
    [data]="listOptions"
    style="width: 200px; margin: 16px;">
</kendo-dropdownlist>
```
- This is how the Kendo Dropdown should look:

![Expanded Kendo Dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxoqwndpfguv2igxh86i.PNG)
- Next we need to be able to <u>see the _Kendo Popup_ in the page source</u> and check if it is attached to the <abbr title="app-root">[very end of the DOM](https://stackoverflow.com/questions/53584403/angular-kendo-popup-element-is-attached-to-very-end-of-dom)</abbr>

<small>In order to see the _Kendo Popup_, from developer tools enter the following line in the browsers console while the project is running locally:</small>

> `setTimeout(() => {debugger}, 5000);`

<small>and within 5 seconds open the dropdown, afterwards the debugger will become active and the _Kendo Popup_ can be seen in the page source.</small>

- What we can see is that the _Kendo Popup_ element is contained in the app-root element and it is at the same level as the newly created <mark>app-dropdown-list</mark> component:

![Source view with kendo-popup within app-root](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6rdzmn1gaza3et7mpnw.PNG)

- In order to attach the Kendo Popup to the Kendo Dropdown, add the following line into the <u>kendo-dropdownlist</u> element from the <mark>dropdown-list.component.html</mark> file:

```html
<kendo-dropdownlist
    [data]="listOptions"
//-------------------------------------------------------
    [popupSettings]="{appendTo: 'component'}" // this line
//-------------------------------------------------------
    style="width: 200px; margin: 16px;">
</kendo-dropdownlist>

```

- Now save the changes and enter the following line in the browsers console:

> `setTimeout(() => {debugger}, 5000);`

and just as before open the dropdown and wait 5 seconds for the debugger to become active, afterwards we can see that the _Kendo Popup_ is inside the <abbr title="kendo-dropdownlist">Kendo Dropdown</abbr>:

![Source view with kendo-popup within kendo-dropdownlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bu89zbvc6kv9z43jnby.PNG)

---

## As a side note
We can apply a custom css class to the _Kendo Popup_ by adding the **popupClass** property to the **popupSettings**:

```html
<kendo-dropdownlist
    [data]="listOptions"
    [popupSettings]="
    {
       appendTo: 'component',
//-------------------------------------------------------
       popupClass: 'our-style' // this line
//-------------------------------------------------------
    }"
    style="width: 200px; margin: 16px;">
</kendo-dropdownlist>
```

However ng-deep or ViewEncapsulation.None are still needed in order to have the css properties actually work:

```js
::ng-deep .our-style {
  font-weight: 900;
}
```

## The final project

A working example can be seen on [stackblitz](https://stackblitz.com/edit/github-afcxpp?file=src%2Fapp%2Fdropdown-list%2Fdropdown-list.component.html):
{% embed https://stackblitz.com/edit/github-afcxpp?file=src%2Fapp%2Fdropdown-list%2Fdropdown-list.component.html %}