ejToggleButton

8 Mar 201819 minutes to read

The Toggle Button allows you to perform the toggle option by using checked and unchecked state. This Toggle Button can be helpful to user to check their states. The Toggle Button control displays both text and images.

Syntax

HTML

<ej-togglebutton></ej-togglebutton>

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="play"></ej-togglebutton>

Requires

module:jQuery
module:ej.core.js
module:ej.togglebutton.js
module:ej.checkbox.js

Members

activePrefixIcon `string`

Specify the icon in active state to the toggle button and it will be aligned from left margin of the button.

NOTE

This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

Default Value

””

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="play" activeText="Pause" [contentType]="contentType" [activePrefixIcon]="activePrefixIcon" [defaultPrefixIcon]="defaultPrefixIcon"></ej-togglebutton>

export class AppComponent {
    contentType: any;
    activePrefixIcon: string;
    defaultPrefixIcon: string;
    constructor() {
    this.contentType = "textandimage";
    this.activePrefixIcon="e-mediapause e-uiLight";
    this.defaultPrefixIcon="e-mediaplay e-uiLight";
    };
}

activeSuffixIcon `string`

Specify the icon in active state to the toggle button and it will be aligned from right margin of the button.

NOTE

This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

Default Value

””

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [contentType]="contentType" [activeSuffixIcon]="activeSuffixIcon" defaultSuffixIcon="defaultSuffixIcon"></ej-togglebutton>

export class AppComponent {
    contentType: any;
    activeSuffixIcon: string;
    defaultSuffixIcon: string;
    constructor() {
    this.contentType = "imageboth";
    this.activeSuffixIcon="e-mediapause e-uiLight";
    this.defaultSuffixIcon="e-mediaplay e-uiLight";
    };
}

activeText `string`

Sets the text when ToggleButton is in active state i.e.,checked state.

Default Value

null

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause"></ej-togglebutton>

contentType `enum`

Specifies the contentType of the ToggleButton. See ContentType as below

Name	Description
TextOnly	To specify the text contentType
ImageOnly	To specify the image contentType
ImageBoth	To specify the two images of contentType
TextAndImage	To specify the Text and Image contentType
ImageTextImage	To specify the image text and image contentType

Default Value

ej.ContentType.TextOnly

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType"></ej-togglebutton>

export class AppComponent {
    contentType: any;
    constructor() {
    this.contentType = ej.ContentType.TextOnly;
    };
}

cssClass `string`

Specify the CSS class to the ToggleButton to achieve custom theme.

Default Value

””

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [cssClass]="customCss"></ej-togglebutton>

export class AppComponent {
    customCss: string;
    constructor() {
    this.customCss = "gradient-lime";
    };
}

defaultPrefixIcon `string`

Specify the icon in default state to the toggle button and it will be aligned from left margin of the button.

NOTE

This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

Default Value

””

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType" [activePrefixIcon]="activePrefixIcon" [defaultPrefixIcon]="defaultPrefixIcon"></ej-togglebutton>

export class AppComponent {
    contentType: any;
    activePrefixIcon: string;
    defaultPrefixIcon: string;
    constructor() {
    this.contentType = "textandimage";
    this.activePrefixIcon="e-mediapause e-uiLight";
    this.defaultPrefixIcon="e-mediaplay e-uiLight";
    };
}

defaultSuffixIcon `string`

Specify the icon in default state to the toggle button and it will be aligned from right margin of the button.

NOTE

This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

Default Value

””

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType" [activeSuffixIcon]="activeSuffixIcon" [defaultSuffixIcon]="defaultSuffixIcon"></ej-togglebutton>

export class AppComponent {
    contentType: any;
    activeSuffixIcon: string;
    defaultSuffixIcon: string;
    constructor() {
    this.contentType = "textandimage";
    this.activeSuffixIcon="e-mediapause e-uiLight";
    this.defaultSuffixIcon="e-mediaplay e-uiLight";
    };
}

defaultText `string`

Specifies the text of the ToggleButton, when the control is a default state. i.e., unChecked state.

Default Value

null

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText"></ej-togglebutton>

export class AppComponent {
    defaultText: string;
    activeText: string;
    constructor() {
    this.defaultText="Play";
    this.activeText="Pause";
    };
}

enabled `boolean`

Specifies the state of the ToggleButton.

Default Value

true

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [enabled]="true"></ej-togglebutton>

export class AppComponent {
    defaultText: string;
    activeText: string;
    constructor() {
    this.defaultText="Play";
    this.activeText="Pause";
    };
}

enablePersistence `boolean`

Save current model value to browser cookies for maintaining states. When refreshing the ToggleButton control page, the model value is applied from browser cookies or HTML 5
local storage.

Default Value

false

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [enablePersistence]="true"></ej-togglebutton>

export class AppComponent {
    defaultText: string;
    activeText: string;
    constructor() {
    this.defaultText="Play";
    this.activeText="Pause";
    };
}

enableRTL `boolean`

Specify the Right to Left direction of the ToggleButton.

Default Value

false

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [enableRTL]="true"></ej-togglebutton>

export class AppComponent {
    defaultText: string;
    activeText: string;
    constructor() {
    this.defaultText="Play";
    this.activeText="Pause";
    };
}

height `number|string`

Specifies the height of the ToggleButton.

Default Value

28pixel

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [height]="height"></ej-togglebutton>

export class AppComponent {
    defaultText: string;
    activeText: string;
    height: string;
    constructor() {
    this.defaultText="Play";
    this.activeText="Pause";
    this.height= "28px";
    };
}

htmlAttributes `object`

It allows to define the characteristics of the ToggleButton control. It will helps to extend the capability of an HTML element.

Default Value

{}

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" [defaultText]="defaultText" [activeText]="activeText" [htmlAttributes]="htmlAttributes"></ej-togglebutton>

export class AppComponent {
    defaultText: string;
    activeText: string;
    htmlAttributes: Object;
    constructor() {
    this.defaultText="Play";
    this.activeText="Pause";
    this.htmlAttributes= {disabled:"disabled"};
    };
}

imagePosition `enum`

Specifies the image position of the ToggleButton.

NOTE

This image position is applicable only with the contentType property value set as textandimage. The images can be positioned in both imageLeft and imageRight options.

Name	Description
ImageRight	To specify Left position of the toggle button
ImageLeft	To specify Right position of the toggle button
ImageTop	To specify Top position of the toggle button
ImageBottom	To specify Bottom position of the toggle button

Default Value

ej.ImagePosition.ImageLeft

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [contentType]="contentType" [imagePosition]="imagePosition" [activePrefixIcon]="activePrefixIcon" [defaultPrefixIcon]="defaultPrefixIcon"></ej-togglebutton>

export class AppComponent {
    contentType: any;
    activePrefixIcon: string;
    defaultPrefixIcon: string;
    imagePosition: any;
    constructor() {
    this.contentType = ej.ContentType.TextAndImage;
    this.activePrefixIcon="e-mediapause e-uiLight";
    this.defaultPrefixIcon="e-mediaplay e-uiLight";
    this.imagePosition=ej.ImagePosition.ImageRight;
    };
}

preventToggle `boolean`

Allows to prevents the control switched to checked (active) state.

Default Value

false

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [preventToggle]="false"></ej-togglebutton>

showRoundedCorner `boolean`

Displays the ToggleButton with rounded corners.

Default Value

false

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [showRoundedCorner]="true"></ej-togglebutton>

size `enum`

Specifies the size of the ToggleButton. See ButtonSize as below

Name	Description
Mini	To specify the minimum size of the toggle button
Small	To specify the small size of the toggle button
Medium	To specify the medium size of the toggle button
Large	To specify the large size of the toggle button
Normal	To specify the normal size of the toggle button

Default Value

ej.ButtonSize.Normal

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [size]="size"></ej-togglebutton>

export class AppComponent {
    size: any;
    constructor() {
    this.size = ej.ButtonSize.Mini;
    };
}

toggleState `boolean`

It allows to define the ToggleButton state to checked(Active) or unchecked(Default) at initial time.

Default Value

false

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [toggleState]="false"></ej-togglebutton>

type `enum`

Specifies the type of the ToggleButton. See ButtonType as below

Name	Description
Button	To create button with button type as button
Reset	To create button with button type as reset
Submit	To create button with button type as submit

Default Value

ej.ButtonType.Button

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [type]="type"></ej-togglebutton>

export class AppComponent {
    type: any;
    constructor() {
    this.type = ej.ButtonType.Submit;
    };
}

width `number|string`

Specifies the width of the ToggleButton.

Default Value

100pixel

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" [width]="width"></ej-togglebutton>

export class AppComponent {
    width: string;
    constructor() {
    this.width = "100px";
    };
}

Methods

destroy()

Allows you to destroy the ToggleButton widget.

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause"></ej-togglebutton>

// Create instance of ToggleButton
var toggleObj = $("#toggleButton").data("ejToggleButton");
toggleObj.destroy(); // destroy the toggle button

disable()

To disable the ToggleButton to prevent all user interactions.

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause"></ej-togglebutton>

// Create instance of ToggleButton
var toggleObj = $("#toggleButton").data("ejToggleButton");
toggleObj.disable(); // disable the toggle button

enable()

To enable the ToggleButton.

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause"></ej-togglebutton>

// Create instance of ToggleButton
var toggleObj = $("#toggleButton").data("ejToggleButton");
toggleObj.enable(); // enable the toggle button

Events

ejchange

Fires when ToggleButton control state is changed successfully.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
isChecked	boolean	return the toggle button checked state
model	object	returns the toggle button model
type	string	returns the name of the event

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (ejchange)="onChange($event)"></ej-togglebutton>

export class AppComponent {
        constructor() { 
        }
        onChange(e: any){
        // Your code here
        }
}

ejclick

Fires when ToggleButton control is clicked successfully.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
isChecked	boolean	return the toggle button checked state
model	object	returns the toggle button model
status	boolean	return the toggle button state
type	string	returns the name of the event

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (ejclick)="onClick($event)"></ej-togglebutton>

export class AppComponent {
        constructor() { 
        }
        onClick(e: any){
        // Your code here
        }
}

create

Fires when ToggleButton control is created successfully.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the toggle button model
type	string	returns the name of the event

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (create)="onCreate($event)"></ej-togglebutton>

export class AppComponent {
        constructor() { 
        }
        onCreate(e: any){
        // Your code here
        }
}

destroy

Fires when ToggleButton control is destroyed successfully.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the toggle button model
type	string	returns the name of the event

Example

HTML

<ej-togglebutton type="checkbox" id="toggleButton" defaultText="Play" activeText="Pause" (destroy)="onDestroy($event)"></ej-togglebutton>

export class AppComponent {
        constructor() { 
        }
        onDestroy(e: any){
        // Your code here
        }
}

ejToggleButton

Syntax

Example

Requires

Members

activePrefixIcon string

Default Value

Example

activeSuffixIcon string

Default Value

Example

activeText string

Default Value

Example

contentType enum

Default Value

Example

cssClass string

Default Value

Example

defaultPrefixIcon string

Default Value

Example

defaultSuffixIcon string

Default Value

Example

defaultText string

Default Value

Example

enabled boolean

Default Value

Example

enablePersistence boolean

Default Value

Example

enableRTL boolean

Default Value

Example

height number|string

Default Value

Example

htmlAttributes object

Default Value

Example

imagePosition enum

Default Value

Example

preventToggle boolean

Default Value

Example

showRoundedCorner boolean

Default Value

Example

size enum

Default Value

Example

toggleState boolean

Default Value

Example

type enum

Default Value

Example

width number|string

Default Value

Example

Methods

destroy()

Example

disable()

Example

enable()

Example

Events

ejchange

Example

ejclick

Example

create

Example

destroy

activePrefixIcon `string`

activeSuffixIcon `string`

activeText `string`

contentType `enum`

cssClass `string`

defaultPrefixIcon `string`

defaultSuffixIcon `string`

defaultText `string`

enabled `boolean`

enablePersistence `boolean`

enableRTL `boolean`

height `number|string`

htmlAttributes `object`

imagePosition `enum`

preventToggle `boolean`

showRoundedCorner `boolean`

size `enum`

toggleState `boolean`

type `enum`

width `number|string`