ejToggleButton

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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • // 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>
  • ts
  • // 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>
  • ts
  • // 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class AppComponent {
            constructor() { 
            }
            onDestroy(e: any){
            // Your code here
            }
    }