Angular DropDownButton API Reference

Name	Type	Default
animationType	enum:DropDownButtonAnimationType	'slide'
enum DropDownButtonAnimationType { none, slide, fade } Sets or gets the `animationType` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [animationType]="'fade'"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
arrowSize	Number	16
Sets or gets the `arrowSize` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [arrowSize]="20"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
autoOpen	Boolean	false
Sets or gets the `autoOpen` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [autoOpen]="true"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
closeDelay	Number	400
Sets or gets the `closeDelay` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [closeDelay]="200"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [disabled]="true"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
dropDownHorizontalAlignment	enum:DropDownButtonDropDownHorizontalAlignment	'left'
Sets or gets the `dropDownHorizontalAlignment` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [dropDownHorizontalAlignment]="'right'"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
dropDownVerticalAlignment	enum:DropDownButtonDropDownVerticalAlignment	'bottom'
Sets or gets the `dropDownVerticalAlignment` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [dropDownVerticalAlignment]="'top'"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
dropDownWidth	String \| Number	null
Sets or gets the `dropDownWidth` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [dropDownWidth]="200"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
enableBrowserBoundsDetection	Boolean	false
Sets or gets the `enableBrowserBoundsDetection` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [enableBrowserBoundsDetection]="true"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
height	Size	null
Sets or gets the `height` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
initContent	() => Void	null
Sets or gets the `initContent` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [initContent]="initContent"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
openDelay	Number	350
Sets or gets the `openDelay` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [openDelay]="1000"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
popupZIndex	Number	20000
Sets or gets the `popupZIndex` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [popupZIndex]="9999"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
rtl	Boolean	false
Sets or gets the `rtl` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [rtl]="true"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
template	enum:DropDownButtonTemplate	'default'
enum DropDownButtonTemplate { default, primary, success, warning, danger, info } Sets or gets the `template` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [template]="'success'"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
theme	String	''
Sets or gets the `theme` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25" [theme]="'energyblue'"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
width	Size	null
Sets or gets the `width` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { }
Events
close	Event
This event is triggered when the button's popup is closed. Code examples Bind to the `close` event of jqxDropDownButton. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton (onClose)="Close($event)" [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { Close(event: any): void { // Do Something } }
open	Event
This event is triggered when the button's popup is opened. Code examples Bind to the `open` event of jqxDropDownButton. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton (onOpen)="Open($event)" [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent { Open(event: any): void { // Do Something } }
Methods
Name	Return Type	Arguments
close	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { this.myDropDownButton.close(); } }
destroy	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { this.myDropDownButton.destroy(); } }
focus	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { this.myDropDownButton.focus(); } }
getContent	Any	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { let value = this.myDropDownButton.getContent(); } }
isOpened	Boolean	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { let value = this.myDropDownButton.isOpened(); } }
open	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { this.myDropDownButton.open(); } }
setContent	Void	content: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxDropDownButton #myDropDownButton [width]="300" [height]="25"> <jqxTree #myTree [width]="200"> <ul> <li item-selected='true'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li> Solutions <ul> <li>eLearning</li> <li>Mobile</li> <li>RIA</li> <li>Training</li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> </ul> </jqxTree> </jqxDropDownButton> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myDropDownButton') myDropDownButton: jqxDropDownButtonComponent; ngAfterViewInit(): void { this.myDropDownButton.setContent('content'); } }

Properties

Events

Code examples

Code examples

Methods