position of popup for Dropdownlist

[Chau]

I used the dropdownlist component outside of <kendo-grid> and by adding the [popupSettings]="{appendTo: 'component'}", I got the selection list displayed right under the dropdown control.

I tried to do the same thing for a dropdownlist of a column inside <kendo-grid>, and the popup did not display right under the dropdown, but over it (see attached image, I selected the dropdown for the 'Hospital C' row).

The HTML for that column is:

<kendo-grid-column field="FileId" title="File Lists" [width]="140">
                                    <ng-template kendoGridCellTemplate
                                                 let-dataItem="dataItem"                                                 
                                                 let-formGroup="formGroup">
                                        <kendo-dropdownlist [data]="fileLists"
                                                            #ddl_filelists
                                                            [textField]="'description'"
                                                            [valueField]="'key'"
                                                            [valuePrimitive]="true"
                                                            [popupSettings]="{appendTo: 'root'}"
                                                            [(ngModel)]="dataItem.FileId">
                                        </kendo-dropdownlist>                                       
                                    </ng-template>
                                </kendo-grid-column>

Thanks for any suggestion.

 

[Dimiter Topalov]

Hi Chau,

The most straight-forward approach would be to not use the popupSettings property at all:

https://plnkr.co/edit/BwbUOHWBydJQkQhecZTO?p=preview

When the "appendTo" option is used and the 'component' value is passed, this results in the undesired behavior of the popup containing the list options to become a child of the Grid cell, thus it being partially hidden when the popup is opened:

https://plnkr.co/edit/qbrLVBpMNxjjmLjazBXv?p=preview

When the value, passed to the appendTo option is 'root' (as the provided code snippet suggests), it is displayed as expected:

https://plnkr.co/edit/QEMyIPo90rdiZiAMfB85?p=preview

Please compare your implementation to the examples above and perform the necessary adjustments (also make sure that you are using the latest versions of our components and theme). If the issue persists, we will need a similar runnable example where it can be observed so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

Hi Dimiter,

How do I get the latest version of Kendo components. 

Attached is a screenshot of my package.json which shows my version of kendo-angular-grid at 1.8.0 and kendo-angular-dropdowns at 1.6.1, which must have been outdated.

I went to the GridOverview Installation page and updated rxjs to 5.5.6, then ran: npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @progress/kendo-angular-buttons @angular/animations

But my package.json still shows the kendo-angular-grid@1.8.0.

Any help is greatly appreciated.

 

[Chau]

I compared my local @angular and @progress versions with the systemjs.config.js file of the demo plunker, and reinstalled all the @angular (common, compiler, core, forms, http, compiler-cli, platform-browser, etc.) at version 5.2.2 and later, and updated the @progress components to the latest version.  (see attached package.json).

However, the issue of the dropdown list position inside my kendo-grid is still not resolved even after removing the [popupSettings] attribute. I am attaching a screenshot showing the selection list positioned two rows above the dropdownlist component.

 

 

[Dimiter Topalov]

Hello Chau,

The provided setup seems correct, but the screenshot with the DropDownList suggests that it is not rendered as expected and there could be some JavaScript error in the browser's developer tools console that might point you in the right direction.

Also, are you observing the wrong positioning of the popup only when opening a dropdown in the bottom part of the Grid (such that the popup should be displayed above the Grid row, as opposed to below because there is no available space below the Grid row)?

As I cannot reproduce the undesired behavior with a very similar setup:

https://plnkr.co/edit/BwbUOHWBydJQkQhecZTO?p=preview

https://www.screencast.com/t/i4LXzDTw

Can you please either update the plunker in such a way that the issue can be observed, or send us a similar Plunker or an isolated runnable project where the issue can be reproduced, so we can try to determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[SilverFish]

Dimiter,

The samples you have provided in this post are not working. Can you please take a look? What is Editservice, by the way?

[Dimiter Topalov]

Hi SilverFish,

The Plunker examples' SystemJS configuration and packages are rather outdated. I migrated the last one to Stackblitz:

https://stackblitz.com/edit/angular-s6e1qr?file=app/app.module.ts

The EditService is a custom Angular service that is used for handling the communication with the remote back end in some of the Grid editing demos:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/#toc-reactive-forms

https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

Furthermore, the Grid provides the opportunity to use a built-in one that handles the editing operations and related Grid events, or create a custom one to pass to the Grid:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-custom-service

Regards,
Dimiter Topalov
Progress Telerik

[Dina]

hello , can we control the opening position for the dropdown to be to the right instead of default left side ?

[Dimiter Topalov]

Hello Dina,

The only built-in support for the desired behavior is in in RTL mode:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/globalization/#toc-right-to-left-support

Alternatively, the developer can handle the DropDownList opened event, access the internal Popup instance, and customize its anchorAlign and popupAlign settings, e.g.:

https://stackblitz.com/edit/angular-zzvr81?file=app/app.component.ts

Further details on Popup positioning are available in the following documentation article:

https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning/#toc-positioning

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik