ejGroupButton
7 Nov 201724 minutes to read
The Essential JavaScript Group Button widget helps to display multiple buttons which are stacked together in a single line and used as a navigation component. Also it manages the checked/unchecked state for a set of buttons, since it supports radio and check button modes.
Syntax
<ej-groupbutton></ej-groupbutton>
Example
<ej-groupbutton [(dataSource)]="data"></ej-groupbutton>
export class AppComponent {
data: Object;
constructor() {
this.data = [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Year", contentType: "textonly" }];
};
}
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.groupbutton.js
Members
cssClass string
Sets the specified class to GroupButton wrapper element, which allows for custom skinning option in ejGroupButton control.
Default Value
- ””
Example
<ej-groupbutton [(dataSource)]="data" [cssClass]="customCss"></ej-groupbutton>
export class AppComponent {
data: Object;
customCss: string;
constructor() {
this.data = [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Year", contentType: "textonly" }];
};
this.customCss= "e-btnColor";
}
dataSource object
To set the local JSON data, define a JSON array and initialize the GroupButton with dataSource property. Specify the column names in the fields property.
Default Value
- null
Example
<ej-groupbutton [(dataSource)]="data" [showRoundedCorner]="true"></ej-groupbutton>
export class AppComponent {
data: Object;
constructor() {
this.data = [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Year", contentType: "textonly" }];
};
}
enableRTL boolean
Displays the ejGroupButton in Right to Left direction.
Default Value
- false
Example
<ej-groupbutton [(dataSource)]="data" [enableRTL]="true"></ej-groupbutton>
export class AppComponent {
data: Object;
constructor() {
this.data = [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Year", contentType: "textonly" }];
};
}
enabled boolean
Used to enable or disable the ejGroupButton control.
Default Value
- true
Example
<ej-groupbutton [(dataSource)]="data" [enabled]="false"></ej-groupbutton>
export class AppComponent {
data: Object;
constructor() {
this.data = [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Year", contentType: "textonly" }];
};
}
fields object
Gets or sets a value that indicates to display the values of the data.
Default value
- null
fields.contentType enum|string
Specifies the content type of the button. Button can have image only, text only, imagetextimage, textandimage, or imageboth as content type.
fields.htmlAttribute object
Specifies the HTML attributes to the element.
fields.imagePosition enum|string
Specifies the image position in the button. This property is applicable for the content type ‘textandimage’ only.
fields.linkAttribute object
Specifies the link attributes to the element.
fields.prefixIcon string
Specifies the primary icon for button. This icon will be displayed from the left margin of the button.
fields.selected boolean
Specifies the button is in selected state.
fields.suffixIcon string
Specifies the secondary icon for button. This icon will be displayed from the right margin of the button.
fields.text string
Specifies the text in the button.
fields.url string
Specifies the URL of the button for navigation.
Example
<ej-groupbutton [(dataSource)]="data" [(fields)]="fields"></ej-groupbutton>
export class AppComponent {
data: Object;
fields: Object;
constructor() {
this.data = [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Year", contentType: "textonly" },
];
this.fields= { contentType :"contentType", text:"text", selected: "selected" };
}
}
groupButtonMode enum | string
Sets the GroupButton behavior to works as Checkbox mode/ radio button mode based on the specified option.
Name | Description |
---|---|
CheckBox | Sets the GroupButton to work as checkbox mode |
RadioButton | Sets the RadioButton to work as radio button mode |
Default Value
- ej.GroupButtonMode.RadioButton
Example
<ej-groupbutton [(dataSource)]="data" [groupButtonMode]="groupButtonMode"></ej-groupbutton>
export class AppComponent {
data: Object;
groupButtonMode: any;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.groupButtonMode = ej.GroupButtonMode.RadioButton;
}
}
height string | number
Used to sets the height of the ejGroupButton control.
Default Value
- 28
Example
<ej-groupbutton [(dataSource)]="data" [height]="height"></ej-groupbutton>
export class AppComponent {
data: Object;
height: number;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.height = 40;
}
}
htmlAttributes object
Defines the characteristics of the ejGroupButton control and extend the capability of an HTML element by adding specified attributes to element tag and by performing the related actions
Default Value
- {}
Example
<ej-groupbutton [(dataSource)]="data" [htmlAttributes]="htmlAttributes"></ej-groupbutton>
export class AppComponent {
data: Object;
htmlAttributes: any;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.htmlAttributes = { title: "Group Button" };
}
}
orientation enum
Specify the orientation of the GroupButton. See below to get available orientations
Name | Type | Default | Description |
---|---|---|---|
Horizontal | string | horizontal | Enum for Horizontal Orientation |
Vertical | string | vertical | Enum for Vertical Orientation |
Default Value
- ej.Orientation.Horizontal
Example
<ej-groupbutton [(dataSource)]="data" [orientation]="orientation"></ej-groupbutton>
export class AppComponent {
data: Object;
orientation: any;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.orientation = ej.Orientation.Vertical;
}
}
query Object
Query the dataSource from the table for Groupbutton
Default Value:
- null
<ej-groupbutton [(dataSource)]="data" [query]="query" [fields]="fields"></ej-groupbutton>
import {Component, ViewEncapsulation} from '@angular/core';
import {NorthwindService} from './services/northwind.service';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html',
providers:[NorthwindService]
})
export class AppComponent {
data: Object;
dataManager: any;
query:any;
fields:Object;
constructor()
{
this.dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
crossDomain:true
});
this.data = this.dataManager;
this.query = ej.Query().from("Orders").take(6);
this.fields = { text: "CustomerID" };
}
}
selectedItemIndex number[] | string[]
Sets the list of button elements to be selected. To enable this option groupButtonMode should be in “checkbox” mode.
Default Value
- []
Example
<ej-groupbutton [(dataSource)]="data" [groupButtonMode]="groupButtonMode" [selectedItemIndex]="selectedItemIndex"></ej-groupbutton>
export class AppComponent {
data: Object;
groupButtonMode: any;
selectedItemIndex: string[];
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.groupButtonMode = "checkbox";
this.selectedItemIndex = ["1","2"];
}
}
showRoundedCorner boolean
Sets the rounder corner to the GroupButton, if sets as true.
Default Value
- false
Example
<ej-groupbutton [(dataSource)]="data" [showRoundedCorner]="true"></ej-groupbutton>
export class AppComponent {
data: Object;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
}
}
size enum | string
Specifies the size of the button. See available size
Default Value
- ej.ButtonSize.Normal
Example
<ej-groupbutton [(dataSource)]="data" [size]="size"></ej-groupbutton>
export class AppComponent {
data: Object;
size: any;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.size=ej.ButtonSize.Large;
}
}
width string | number
Defines the width of the ejGroupButton control.
Default Value
- ””
Example
<ej-groupbutton [(dataSource)]="data" [width]="width"></ej-groupbutton>
export class AppComponent {
data: Object;
width: string;
constructor() {
this.data = [
{ text: "Day" },
{ text: "Week" },
{ text: "Month" },
{ text: "Year" }
];
this.width="100%";
}
}
Methods
deselectItem(element)
Remove the selection state of the specified the button element from the GroupButton
Parameters | Type | Description |
element | jQuery | Specific button element |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.deselectItem(getSelectedItem());
destroy()
Destroy the GroupButton widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.destroy(); // destroy the GroupButton
disable()
Disables the GroupButton control
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.disable();
disableItem(element)
Disable the specified button element from the ejGroupButton control.
Parameters | Type | Description |
element | jQuery | Specific button element |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
var element = $("#groupButton").find('li')[0];
groupButtonObj.disableItem(element);
enable()
Enables the disabled ejGroupButton control.
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.enable();
enableItem(element)
Enable the specified disabled button element from the ejGroupButton control.
Parameters | Type | Description |
element | jQuery | Specific button element |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
element = $("#groupButton").find('li')[0];
groupButtonObj.enableItem(element);
getIndex(element)
Returns the index value for specified button element in the GroupButton control.
Parameters | Type | Description |
element | jQuery | Specific button element |
Returns:
number
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
var element = $("#groupButton").find('li')[0];
groupButtonObj.getIndex(element);
getSelectedItem()
This method returns the list of active state button elements from the GroupButton control.
Returns:
object
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.getSelectedItem();
hide()
Hides the GroupButton control
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.hide();
hideItem(element)
Hide the specified button element from the ejGroupButton control.
Parameters | Type | Description |
element | jQuery | Specific button element |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
var element = $("#groupButton").find('li')[0];
groupButtonObj.hideItem(element);
isDisabled()
Returns the disabled state of the specified element button element in GroupButton as Boolean.
Returns
boolean
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
var element = $("#groupButton").find('li')[0];
groupButtonObj.isDisabled(element);
isSelected()
Returns the state of the specified button element as Boolean.
Returns
boolean
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
var element = $("#groupButton").find('li')[0];
groupButtonObj.isSelected(element);
selectItem(element)
Public method used to select the specified button element from the ejGroupButton control.
Parameters | Type | Description |
element | jQuery | Specific button element |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
var element = $("#groupButton").find('li')[0];
groupButtonObj.selectItem(element);
show()
Shows the GroupButton control, if its hide.
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
groupButtonObj.show();
showItem(element)
Show the specified hidden button element from the ejGroupButton control.
Parameters | Type | Description |
element | jQuery | Specific button element |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data"></ej-groupbutton>
//create the instance to the ejGroupButton
var groupButtonObj = $("#groupButton").ejGroupButton('instance');
element = $("#groupButton").find('li')[0];
groupButtonObj.showItem(element);
Events
beforeSelect
Triggered before any button element in the GroupButton get selected.
Name | Type | Description |
---|---|---|
disabled | boolean | Boolean value based on whether the button element is disabled or not. |
element | object | Returns the selection button element. |
event | object | Event object |
id | string | Return the button element ID. |
index | number | Button item index. |
model |
|
returns the button model |
selected | boolean | Boolean value based on whether the button element is selected or not. |
type | string | returns the name of the event |
status | boolean | return the button state |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data" (beforeSelect)="onBeforeSelect($event)"></ej-groupbutton>
export class AppComponent {
constructor(){
}
onBeforeSelect(e: any){
//Your code here
}
}
create
Fires after GroupButton control is created.If the user want to perform any operation after the button control creation then the user can make use of this create event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the GroupButton model |
type | string | returns the name of the event |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data" (create)="onCreate($event)"></ej-groupbutton>
export class AppComponent {
constructor(){
}
onCreate(e: any){
// Your code here
}
}
destroy
Fires when the GroupButton is destroyed successfully.If the user want to perform any operation after the destroy button control then the user can make use of this destroy event.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the GroupButton model |
type | string | returns the name of the event |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data" (destroy)="onDestroy($event)"></ej-groupbutton>
export class AppComponent {
constructor(){
}
onDestroy(e: any){
// Your code here
}
}
keyPress
Triggered once the key is pressed, when the control is in focused state.
Name | Type | Description |
---|---|---|
disabled | boolean | Boolean value based on whether the button element is disabled or not. |
element | object | Returns the selection button element. |
event | object | Event object |
id | string | Return the button element ID. |
index | number | Button item index. |
model |
|
returns the button model |
selected | boolean | Boolean value based on whether the button element is selected or not. |
type | string | returns the name of the event |
status | boolean | return the button state |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data" (keyPress)="onKeyPress($event)"></ej-groupbutton>
export class AppComponent {
constructor(){
}
onKeyPress(e: any){
// Your code here
}
}
select
Triggered when the button element get selected.
Name | Type | Description |
---|---|---|
disabled | boolean | Boolean value based on whether the selected button element is disabled or not. |
element | object | Returns the selection button element. |
event | object | Event object |
id | string | Return the selected button element ID. |
index | number | Selected button item index. |
model |
|
returns the button model |
selected | boolean | Boolean value based on whether the button element is selected or not. |
type | string | returns the name of the event |
status | boolean | return the button state |
Example
<ej-groupbutton id="groupButton" [(dataSource)]="data" (select)="onSelect($event)"></ej-groupbutton>
export class AppComponent {
constructor(){
}
onSelect(e: any){
// Your code here
}
}