This is a migrated thread and some comments may be shown as answers.

position of popup for Dropdownlist

8 Answers 362 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chau
Top achievements
Rank 1
Chau asked on 07 Feb 2018, 07:48 PM

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.

 

8 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 09 Feb 2018, 11:32 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Chau
Top achievements
Rank 1
answered on 12 Feb 2018, 07:23 PM

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.

 

0
Chau
Top achievements
Rank 1
answered on 13 Feb 2018, 04:05 AM

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.

 

 

0
Dimiter Topalov
Telerik team
answered on 13 Feb 2018, 08:23 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
SilverFish
Top achievements
Rank 1
answered on 31 Oct 2018, 01:20 PM

Dimiter,

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

0
Dimiter Topalov
Telerik team
answered on 02 Nov 2018, 11:25 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dina
Top achievements
Rank 1
answered on 01 Apr 2021, 04:30 PM
hello , can we control the opening position for the dropdown to be to the right instead of default left side ?
0
Dimiter Topalov
Telerik team
answered on 05 Apr 2021, 07:27 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
General Discussions
Asked by
Chau
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Chau
Top achievements
Rank 1
SilverFish
Top achievements
Rank 1
Dina
Top achievements
Rank 1
Share this question
or