Search results

How To

The following section explains how to customize various aspects of the Button.

Create a Block Button

You can customize a Button into a Block Button that will span the entire width of its parent element. To create a Block Button, set the cssClass property to e-block.

tagHelper
blockbutton.cs
@section ControlsSection{
    <ejs-button id="blockbtn" content="BLOCKBUTTON" cssClass="e-block"></ejs-button>
    <ejs-button id="primarybtn" content="BLOCKBUTTON" cssClass="e-block" isPrimary="true"></ejs-button>
    <ejs-button id="successbtn" content="BLOCKBUTTON" cssClass="e-block e-success"></ejs-button>
}

<style>

button {
  margin: 25px 0;
}

</style>
public ActionResult blockButton()
{
    return View();
}

Customize Button Appearance

You can customize the appearance of the Button by using the Cascading Style Sheets (CSS). Define the CSS according to your requirement, and assign the class name to the cssClass property. In the following code snippet the background color, text color, height, width, and sharp corner of the Button can be customized through the e-custom class for all states (hover, focus, and active).

tagHelper
custombutton.cs
@section ControlsSection{
   <ejs-button id="custom" cssClass="e-custom" content="CUSTOM"></ejs-button>
}

<style>

.e-custom {
    border-radius: 0;
    height: 30px;
    width: 80px;
}

.e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
    background-color: #ff6e40;
    color: #fff;
}

button {
  margin: 25px 5px 20px 20px;
}

</style>
public ActionResult CustomButton()
{
    return View();
}

Customize Button Size

Button size can be customized by setting height and width for the button element.

In the following sample, the height and width of the large button is customized as 50px and 120px and the height and width of the small button is customized as 30px and 25px.

tagHelper
customsize.cs
@section ControlsSection{
    <ejs-button id="largebtn" cssClass="e-big-btn" content="Large Button"></ejs-button>
    <ejs-button id="smallbtn" cssClass="e-small-btn" iconCss="e-icons e-add-icon"></ejs-button>
}

<style>

.e-big-btn {
  height: 50px;
  width: 120px;
}

/* To Customize small button */
.e-small-btn {
  height: 30px;
  width: 25px;
}

.e-small-btn.e-icon-btn {
  padding: 0 6px;
  line-height: 24px;
}

button {
  margin: 25px 5px 20px 20px;
}

.e-add-icon::before {
  content: '\e823';
}

</style>
public ActionResult CustomSize()
{
    return View();
}

Customize input and anchor elements

You can customize the appearance of the input and anchor elements using predefined styles through the class property. In the following code snippet, the input element is customized as a link Button by setting the e-btn e-link class, and the anchor element is customized as a primary Button by setting the e-btn e-primary class.

tagHelper
@section ControlsSection{
   <div>
        <input type="button" id="inputbtn" value="Input Button" class="e-btn e-link">
    </div><br>
    <div>
        <a id="anchorbtn" class="e-btn e-primary" href="#">Google</a>
    </div>
}

Repeat Button

The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state.

The following example explains about how to achieve Repeat Button in mouse and touch events.

tagHelper
repeatbutton.cs
@section ControlsSection{
<div class='btncontainer'>
    <ejs-button id="button" content="Button"></ejs-button>
</div>
<div class='event' style="height:auto;">
    <table title='Event Trace' style="width:100%">
    <tbody>
    <tr>
        <th>Event Trace</th>
    </tr>
    <tr>
        <td>
            <div class="eventarea" style="height: 250px;overflow: auto">
                <span id="eventlog" style="word-break: normal;"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="evtbtn" style="padding:20px 0 0 20px">
                <ejs-button id="clear" content="Clear"></ejs-button>
            </div>
        </td>
    </tr>
</tbody>
</table>
</div>
}

<style>

hr {
   margin: 1px 10px 1px 0px;
   border-top: 1px solid #eee;
}

.btncontainer {
  float: left;
  width: 40%;
}

.event {
  float: right;
  width: 60%;
  border-left: 1px solid #D7D7D7;
}

#eventlog b {
  color: #388e3c;
}

</style>

<script>

document.getElementById("clear").addEventListener('click', function () {
    document.getElementById('eventlog').innerHTML = '';
});
document.getElementById("button").addEventListener('mousedown', function () {
    event.preventDefault();
    timeout = setInterval(clickEventHandler, 200);
});
document.getElementById("button").addEventListener('touchstart', function () {
    event.preventDefault();
    timeout = setInterval(clickEventHandler, 200);
});
document.getElementById("button").addEventListener('mouseup', function () {
    clearInterval(timeout);
});
document.getElementById("button").addEventListener('touchend', function () {
    clearInterval(timeout);
});
document.getElementById("button").addEventListener('click', function () {
    appendSpanElement('Button click event triggered.<hr>');
});

function clickEventHandler(e){
    appendSpanElement('Button click event triggered.<hr>');
}

function appendSpanElement(text){
    var span = document.createElement('span');
    span.innerHTML = text;
    var log = document.getElementById('eventlog');
    log.insertBefore(span, log.firstChild);
}
</script>
public ActionResult RepeatButton()
{
    return View();
}

Set the disabled state

Button component can be enabled/disabled by giving disabled property. To disable Button component, the disabled property can be set as true.

The following example demonstrates Button in disabled state.

tagHelper
disabledbutton.cs
@section ControlsSection{
   <ejs-button id="disabled" disabled="true" content="Disabled"></ejs-button>
}

<style>

button {
  margin: 25px 5px 20px 20px;
}

</style>
public ActionResult DisabledButton()
{
    return View();
}

Right-To-Left

Button component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in Button component.

tagHelper
rtl.cs
@section ControlsSection{
   <ejs-button id="rtl" iconCss="e-icons e-setting-icon" content="Settings" enableRtl="true"></ejs-button>
}

<style>

button {
  margin: 25px 5px 20px 20px;
}

.e-setting-icon::before {
  content: '\e7cf';
}

</style>
public ActionResult rtl()
{
    return View();
}

Tooltip for Button

Tooltip can be shown on Button hover and it can be achieved by setting title attribute.

The following snippets illustrates how to show tooltip on Button hover.

tagHelper
tooltip.cs
@section ControlsSection{
   <ejs-button id="primarybtn" title="Primary Button" content="Button" isPrimary="true"></ejs-button>
}

<style>

button {
  margin: 25px 5px 20px 20px;
}

</style>
public ActionResult tooltip()
{
    return View();
}

The appearance of the Button can be changed like a hyperlink by e-link class using cssClass property and link navigation can be handled in Button click event.

In the following example, link is added in Button click event by using window.open() method.

tagHelper
link.cs
@section ControlsSection{
   <ejs-button id="button" cssClass='e-link'>Go to Google</ejs-button>
}

<style>

button {
  margin: 25px 5px 20px 20px;
}

</style>

<script>

document.getElementById('button').onclick = (): void => {
  window.open("https://www.google.com");
};

</script>
public ActionResult link()
{
    return View();
}