## 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 generate 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:
> `ng add @progress/kendo-angular-dropdowns` --- ## Actual solution - In the previously generated dropdown-list.component.ts add a couple of list options for the dropdown: ```js listOptions: string[] = [ "First option", "Second option", "Third option" ]; ``` - In the dropdown-list.component.html file add the Kendo Dropdown: ```html ``` - 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 see the _Kendo Popup_ in the page source and check if it 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) In order to see the _Kendo Popup_, from developer tools enter the following line in the browsers console while the project is running locally: > `setTimeout(() => {debugger}, 5000);` and within 5 seconds open the dropdown, afterwards the debugger will become active and the _Kendo Popup_ can be seen in the page source. - 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 app-dropdown-list 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 kendo-dropdownlist element from the dropdown-list.component.html file: ```html ``` - 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 Kendo Dropdown: ![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 ``` 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 %}

kendopopup

How to attach Kendo UI Popup to component

Join Our Newsletter. No Spam, Only the good stuff.