Kendo DropDownList EventListener

[Levon]

HI to All

Is there a way to add click/scroll eventListener on DropDownList popup.When list is shown I want to listen the scroll Event and when scroll is achieve end - go and load new portion of data and show in the "selectbox".  For example I added click event on kendo-popup, also on ul element in that element - but no evenets was fired? Is this possible with KendoUI?

[Svet]

Hi Levon,

Unfortunately, neither the API of the DropDownList component, nor the API of the PopUp component provides such event that would fire when scrolling reached the end.

However, there is a workaround using a regular Angular approach that can help to attach a scroll event to the PopUp of the DropDownList. Please check the following sample plunker and inspect the browser's console:

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

In order to get the PopUp component's element reference first we need to open it so that it is added to the HTML of the page. This is why on (close) event I am attaching the scroll event listener to the popup. The limitation is that I also have to prevent the PopUp from closing because otherwise it will be removed from the HTML of the page.

On a side note, in case the requested feature is needed in order to implement virtual scrolling of the DropDownList component, I would like to forward you to the following feature request from our UserVoice portal. The UserVoice is a platform from which we get ideas for new features and improvements of Kendo UI for Angular:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/31559278-dropdownlist-virtualization

If you have the time, you can support this feature request by posting a comment on it. 

I hope this helps. Please let me know in case I can provide any further assistance for the built - in features of Kendo UI for Angular.

Regards,
Svetlin
Progress Telerik

[Chau]

Hello,

Is there a way to attach a hover event to the dropdownlist to open the popup selection list?

Also, I found that the popup position is not right below the dropdownlist control. How can I adjust the position?

Thanks for any suggestion.

[Svet]

Hi Chau,

We can use the JavaScript event mouseenter to open the popup of the DropDownList component. Please check the following sample plunker demonstrating this approach:

https://plnkr.co/edit/3uloBQO0zrdCgjCBpher?p=preview

As for the position of the popup, I could not reproduce the reported behavior. Could you send us an isolated example demonstrating the undesired behavior.

By default the position of the popup should be right below the DropDownList component. We can further alter the popup by using the [popupSettings] input property.

I hope this helps. Please let me know in case you need further assistance for this case.

On a side note, please open a separate thread for questions/issues that are not directly related to the thread's initial topic. This will facilitate a tidier support history and better support service in general. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Chau]

Thank you, Svetlin, for your quick reply!

I added that similar code in the ngInit(), but I got the javascript error : Cannot read property 'wrapper' of undefined:

 this.drop.wrapper.nativeElement.addEventListener('mouseenter', ()=>{
      if(!this.drop.isOpen){
        this.drop.toggle(true);
        this.drop.focus()
      }

I did add the #drop in the <kendo-dropdownlist> in html, and the @ViewChild('drop') drop declaration in class AppComponent.

Is there anywhere else I can attach the 'mouseenter' eventlistener besides ngInit() ?

(regarding the popup list position, I got it fixed by using [popupsettings]="{appendTo: 'component'}" which positions the list right below the dropdown).

 

[Svet]

Hi Chau,

Try attaching the 'mouseenter' event in ngAfterViewInit as demonstrated in the following sample plunker:

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

Please let me know in case you need further assistance for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Chau]

Hi Svetlin,

I tried calling that code snippet in ngAfterViewInit(), and I got the same error of 'undefined'. 

In my dropdownlist, I do need 2-way binding using [(ngModel]) attribute.  Do you think that may cause the error?

I tried modifying your plunker by adding [(ngModel)] attribute and the control failed to render.  Can you verify? 

Thanks!

 

[Svet]

Hi Chau,

In order to use ([ngModel]) in the provided sample plunker, we also need to import the FormsModule in app.module.ts:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, DropDownsModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

The reported error (Cannot read property 'wrapper' of undefined) implies that this.drop is undefined. This means that the kendo-dropdownlist element is not successfully taken from the DOM. Make sure that ViewChild is imported properly and used as follows:

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { PopupComponent } from '@progress/kendo-angular-popup';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-dropdownlist #drop [data]="listItems" [(ngModel)]="value" >
      </kendo-dropdownlist>
    </div>
  `
})
export class AppComponent {
  @ViewChild('drop') drop;
  public value = "Medium";
  public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large", "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];

  constructor(private renderer: Renderer2){

  }

  ngAfterViewInit(){
    console.log(this.drop)
    this.drop.wrapper.nativeElement.addEventListener('mouseenter', ()=>{
      if(!this.drop.isOpen){
        this.drop.toggle(true);
        this.drop.focus()
      }

    })
  }

}

I hope this helps. Please let me know in case you need further assistance for this case.

Regards,
Svetlin
Progress Telerik

[Chau]

Thank you Svetlin for taking the time to detail everything I need to have in my code.

I had all that code in place before posting the issue. I can access the #drop element after the page is rendered, e.g. in a blur or open event of the dropdownlist.  I am attaching my .ts and .html files if you like to verify.

As I am new to typescript, Angular 4 and KendoUI, I may have missed something very obvious. Thanks again.

[Svet]

Hi Chau,

Thank you for the provided sample code.

I used the code in a local Angular CLI project but could not reproduce the issue. Please check the following video demonstrating the behavior:

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

The reported error is thrown when trying to access a property of an undefined element. This implies that the element was not properly extracted from the DOM using @ViewChild. (The element may be missing from the HTML or the selector used by @ViewChild might be incorrect.) 

Please let me know in case I can provide any further assistance for this case.

Regards,
Svetlin
Progress Telerik