| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup [disabled]="true">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
}
|
|
enableHover
|
Boolean
|
false
|
Sets or gets the enableHover property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup [enableHover]="false">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
}
|
|
mode
|
enum:ButtonGroupMode
|
'default'
|
enum ButtonGroupMode { checkbox, radio, default } Sets or gets the mode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup [mode]="'radio'">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
}
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup [rtl]="true">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
}
|
|
template
|
enum:ButtonGroupTemplate
|
'default'
|
enum ButtonGroupTemplate { default, primary, success, warning, danger, info } Sets or gets the template property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup [template]="'success'">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
}
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup [theme]="'energyblue'">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
}
|
|
|
|
buttonclick
|
Event
|
|
This event is triggered when a button is clicked.
Code examples
Bind to the buttonclick event of jqxButtonGroup.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup (onButtonclick)="Buttonclick($event)">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
Buttonclick(event: any): void
{
// Do Something
}
}
|
|
selected
|
Event
|
|
This event is triggered when a button is selected - in checkboxes or radio buttons mode.
Code examples
Bind to the selected event of jqxButtonGroup.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup (onSelected)="Selected($event)">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
Selected(event: any): void
{
// Do Something
}
}
|
|
unselected
|
Event
|
|
This event is triggered when a button is unselected - in checkbox or radio buttons mode.
Code examples
Bind to the unselected event of jqxButtonGroup.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup (onUnselected)="Unselected($event)">
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent {
Unselected(event: any): void
{
// Do Something
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
disableAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.disableAt(1);
}
}
|
|
disable
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.disable();
}
}
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.destroy();
}
}
|
|
enable
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.enable();
}
}
|
|
enableAt
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.enableAt(1);
}
}
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.focus();
}
}
|
|
getSelection
|
Any
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
let value = this.myButtonGroup.getSelection();
}
}
|
|
render
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.render();
}
}
|
|
setSelection
|
Void
|
index: Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxButtonGroup #myButtonGroup >
<button style="padding: 4px 16px" id='Left' value='Left'></button>
<button style="padding: 4px 16px" id='Center' value='Center'></button>
<button style="padding: 4px 16px" id='Right' value='Right'></button>
</jqxButtonGroup>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent;
ngAfterViewInit(): void
{
this.myButtonGroup.setSelection(1);
}
}
|