| 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 {
|
|
|
|
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 {
|
|
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 {
|
|
|
| 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');
|