ejButton

8 Mar 201816 minutes to read

Custom Design for HTML Button control.

Syntax

<input type="button" ej-button id="button" />

Example

HTML

<input type="button" ej-button id="button" value="Button" />

Requires

module:jQuery
module:ej.core.js
module:ej.button.js

Members

contentType `enum`

Specifies the contentType of the Button. See below to know available ContentType

Name	Description
TextOnly	To display the text content only in button
ImageOnly	To display the image only in button
ImageBoth	Supports to display image for both ends of the button
TextAndImage	Supports to display image with the text content
ImageTextImage	Supports to display image with both ends of the text

Default Value

ej.ContentType.TextOnly

Example

HTML

<input type="button" ej-button id="button" [contentType]="contentType" [prefixIcon]="prefixIcon" />

export class AppComponent {
        contentType: any;
        prefixIcon: string;
        constructor() {
            this.contentType = ej.ContentType.ImageOnly;
            this.prefixIcon = "e-icon e-handup";
         }
}

cssClass `string`

Sets the root CSS class for Button theme, which is used customize.

Default Value

””

Example

HTML

<input type="button" ej-button id="button" [cssClass]="customCss" />

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

enabled `boolean`

Specifies the button control state.

Default Value

true

Example

HTML

<input type="button" ej-button id="button" [enabled]="false" />

enableRTL `boolean`

Specify the Right to Left direction to button

Default Value

false

Example

HTML

<input type="button" ej-button id="button" [enableRTL]="true" />

height `number`

Specifies the height of the Button.

Default Value

Example

HTML

<input type="button" ej-button id="button" [height]="height" />

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

htmlAttributes `object`

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

Default Value

{}

Example

HTML

<input type="button" ej-button id="button" [htmlAttributes]="htmlAttributes" />

export class AppComponent {
        htmlAttributes: Object;
        constructor() {
            this.htmlAttributes = {disabled:"disabled"};
         }
}

imagePosition `enum`

Specifies the image position of the Button. This image position is applicable only with the textandimage contentType property. The images can be positioned in both imageLeft and imageRight options. See below to know about available ImagePosition

Name	Description
ImageRight	support for aligning text in left and image in right
ImageLeft	support for aligning text in right and image in left
ImageTop	support for aligning text in bottom and image in top.
ImageBottom	support for aligning text in top and image in bottom

Default Value

ej.ImagePosition.ImageLeft

Example

HTML

<input type="button" ej-button id="button" [contentType]="contentType" [imagePosition]="imagePosition" [prefixIcon]="prefixIcon" />

export class AppComponent {
        prefixIcon: string;
        imagePosition: any;
        contentType: any;
        constructor() {
            this.prefixIcon = "e-icon e-handup";
            this.imagePosition = ej.ImagePosition.ImageRight;
            this.contentType = ej.ContentType.TextAndImage;
         }
}

prefixIcon `string`

Specifies the primary icon for Button. This icon will be displayed from the left margin of the button.

NOTE

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

Default Value

null

Example

HTML

<input type="button" ej-button id="button" [contentType]="contentType" [prefixIcon]="prefixIcon" />

export class AppComponent {
        prefixIcon: string;
        imagePosition: any;
        contentType: any;
        constructor() {
            this.prefixIcon = "e-icon e-handup";
            this.contentType = "imageonly";
         }
}

repeatButton `boolean`

Convert the button as repeat button. It raises the ‘Click’ event repeatedly from the it is pressed until it is released.

Default Value

false

Example

HTML

<input type="button" ej-button id="button" [repeatButton]="true" />

showRoundedCorner `boolean`

Displays the Button with rounded corners.

Default Value

false

Example

HTML

<input type="button" ej-button id="button" [showRoundedCorner]="true" />

size `enum`

Specifies the size of the Button. See below to know available ButtonSize

Name	Description
Normal	Creates button with Built-in default size height, width specified
Mini	Creates button with Built-in mini size height, width specified
Small	Creates button with Built-in small size height, width specified
Medium	Creates button with Built-in medium size height, width specified
Large	Creates button with Built-in large size height, width specified

Default Value

ej.ButtonSize.Normal

Example

HTML

<input type="button" ej-button id="button" [size]="size" />

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

suffixIcon `string`

Specifies the secondary icon for Button. This icon will be displayed from the right margin of the button.

NOTE

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

Default Value

null

Example

HTML

<input type="button" ej-button id="button" [contentType]="contentType" [suffixIcon]="suffixIcon" [prefixIcon]="prefixIcon" [text]="text" />

export class AppComponent {
        contentType: any;
        suffixIcon: string;
        prefixIcon: string;
        text: string;
        constructor() {
            this.contentType = "imageboth";
            this.suffixIcon = "e-icon e-file-html";
            this.prefixIcon = "e-icon e-search";
            this.text = "FileSearch";
         }
}

text `string`

Specifies the text content for Button.

Default Value

null

Example

HTML

<input type="button" ej-button id="button" [text]="text" />

export class AppComponent {
        text: string;
        constructor() {
            this.text = "Hello Word";
         }
}

timeInterval `string`

Specified the time interval between two consecutive ‘click’ event on the button.

NOTE

This is applicable for while the button in repeat button mode.

Default Value

“150”

Example

HTML

<input type="button" ej-button id="button" [repeatButton]="true" [timeInterval]="timeInterval" />

export class AppComponent {
        timeInterval: number;
        constructor() {
            this.timeInterval = 100;
         }
}

type `enum`

Specifies the Type of the Button. See below to know available ButtonType

Name	Description
Button	Creates button with Built-in button type specified
Reset	Creates button with Built-in reset type specified
Submit	Creates button with Built-in submit type specified

Default Value

ej.ButtonType.Submit

Example

HTML

<input type="button" ej-button id="button" [type]="type" />

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

width `string | number`

Specifies the width of the Button.

Default Value

“100px”

Example

HTML

<input type="button" ej-button id="button" [width]="width" />

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

Methods

destroy()

destroy the button widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Example

HTML

<input type="button" ej-button id="button1" value="Button" />

var buttonObj = $("#button1").data("ejButton"); // Create instance of Button
buttonObj.destroy(); // destroy the button

disable()

To disable the button

Example

HTML

<input type="button" ej-button id="button1" value="Button" />

var buttonObj = $("#button1").data("ejButton"); // Create instance of Button
buttonObj.disable(); // disable the button

enable()

To enable the button

Example

HTML

<input type="button" ej-button id="button1" value="Button" />

var buttonObj = $("#button1").data("ejButton"); // Create instance of Button
buttonObj.enable(); // enable the button

Events

ejclick

Fires when Button control is clicked successfully.Consider the scenario to perform any validation,modification of content or any other operations click on button,we can make use of this click event to achieve the scenario.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the button model
type	string	returns the name of the event
status	boolean	return the button state
e	object	return the event model for sever side processing.

Example

HTML

<input type="button" ej-button id="button1" value="Button" (ejclick)="onClick($event)" />

export class AppComponent { 
        constructor(){
        }
        onClick(e: any){
           // Write a code block to perform operation while click on button.
        }

 }

create

Fires after Button 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	object	returns the button model
type	string	returns the name of the event

Example

HTML

<input type="button" ej-button id="button1" value="Button" (create)="onCreate($event)" />

export class AppComponent { 
        constructor(){
        }
        onCreate(e: any){
        // Write a code block to perform operation after creating the button.
        }

 }

destroy

Fires when the button 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	object	returns the button model
type	string	returns the name of the event

Example

HTML

<input type="button" ej-button id="button1" value="Button" (destroy)="onDestroy($event)" />

export class AppComponent { 
        constructor(){
        }
        onDestroy(e: any){
        // Write a code block to perform operation after destroy the button.
        }

 }

ejButton

Syntax

Example

Requires

Members

contentType enum

Default Value

Example

cssClass string

Default Value

Example

enabled boolean

Default Value

Example

enableRTL boolean

Default Value

Example

height number

Default Value

Example

htmlAttributes object

Default Value

Example

imagePosition enum

Default Value

Example

prefixIcon string

Default Value

Example

repeatButton boolean

Default Value

Example

showRoundedCorner boolean

Default Value

Example

size enum

Default Value

Example

suffixIcon string

Default Value

Example

text string

Default Value

Example

timeInterval string

Default Value

Example

type enum

Default Value

Example

width string | number

Default Value

Example

Methods

destroy()

Example

disable()

Example

enable()

Example

Events

ejclick

Example

create

Example

destroy

Example

Example

contentType `enum`

cssClass `string`

enabled `boolean`

enableRTL `boolean`

height `number`

htmlAttributes `object`

imagePosition `enum`

prefixIcon `string`

repeatButton `boolean`

showRoundedCorner `boolean`

size `enum`

suffixIcon `string`

text `string`

timeInterval `string`

type `enum`

width `string | number`