Search results

How to

Initialize ButtonGroup using UTIL function

Though, it is a CSS component for easy initialization of ButtonGroup createButtonGroup util function can be used.

Using createButtonGroup method, the Button options, selector, and cssClass is passed and the corresponding classes is added to the elements.

Create basic ButtonGroup

To create a basic ButtonGroup, the target element along with the button elements should be created.

Create radio type ButtonGroup

To create a radio type ButtonGroup, the target element along with the input elements should be created with type radio.

Create checkbox type ButtonGroup

Checkbox type ButtonGroup creation is similar to radio type ButtonGroup, instead the type of the input elements should be checkbox.

The following example illustrates how to create ButtonGroup using createButtonGroup method for basic, checkbox, and radio type behaviors.

razor
default.cs
<h5>Normal behavior</h5>
<div id='basic'>
    <button></button>
    <button></button>
    <button></button>
</div>
<h5>Checkbox type behavior</h5>
<div id='checkbox'>
    <input type="checkbox" id="checkbold" name="font" value="bold"/>
    <input type="checkbox" id="checkitalic" name="font" value="italic"/>
    <input type="checkbox" id="checkundeline" name="font" value="underline"/>
</div>
<h5>Radiobutton type behavior</h5>
<div id='radio'>
    <input type="radio" id="radioleft" name="align" value="left"/>
    <input type="radio" id="radiomiddle" name="align" value="middle"/>
    <input type="radio" id="radioright" name="align" value="right"/>
</div>
<script>
ej.splitbuttons.createButtonGroup('#basic', {
    buttons: [
        { content: 'HTML' },
        { content: 'CSS' },
        { content: 'Javascript'}
    ]
});

ej.splitbuttons.createButtonGroup('#checkbox', {
    buttons: [
        { content: 'Bold' },
        { content: 'Italic' },
        { content: 'Undeline'}
    ]
});

ej.splitbuttons.createButtonGroup('#radio', {
    buttons: [
        { content: 'Left' },
        { content: 'Center' },
        { content: 'Right'}
    ]
});
</script>
public IActionResult Index()
    {
            return View();
    }

If null value is passed in button options, then that particular button will be skipped from processing in createButtonGroup util function.

Create ButtonGroup with icons

ButtonGroup with icons can be achieved by IconCss property of the Button component.

The following example illustrates how to create ButtonGroup with icons.

razor
default.cs
<div class='e-btn-group'>
    @Html.EJS().Button("left").Content("Left").IconCss("e-icons e-left-icon").Render()
    @Html.EJS().Button("middle").Content("Center").IconCss("e-icons e-middle-icon").Render()
    @Html.EJS().Button("right").Content("Right").IconCss("e-icons e-right-icon").Render()
</div>
<style>
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

.e-left-icon::before {
    content: '\ea9d';
}

.e-right-icon::before {
    content: '\e34d';
}

.e-middle-icon::before {
    content: '\e35e';
}
</style>
public IActionResult Index()
    {
            return View();
    }

Create ButtonGroup with rounded corner

The ButtonGroup with rounded corner has round edges on both sided. To ButtonGroup with rounded corner, e-round-corner class is to be added to the target element.

The following example illustrates how to create ButtonGroup with rounded corner.

razor
default.cs
<div class='e-btn-group e-round-corner'>
    @Html.EJS().Button("html").Content("HTML").Render()
    @Html.EJS().Button("css").Content("CSS").Render()
    @Html.EJS().Button("javacript").Content("Javascript").Render()
</div>
public IActionResult Index()
    {
            return View();
    }

Enable RTL

ButtonGroup supports RTL functionality. This can be achieved by adding e-rtl class to the target element.

The following example illustrates how to create ButtonGroup with RTL support.

razor
default.cs
<div class='e-btn-group e-rtl'>
    @Html.EJS().Button("html").Content("HTML").Render()
    @Html.EJS().Button("css").Content("CSS").Render()
    @Html.EJS().Button("javacript").Content("Javascript").Render()
</div>
public IActionResult Index()
    {
            return View();
    }

Disable

Particular button

To disable a particular button in a ButtonGroup, disabled attribute should be added to corresponding button element.

Whole ButtonGroup

To disable whole ButtonGroup, disabled attribute should be added to all the button elements.

The following example illustrates how to disable the particular and the whole ButtonGroup.

razor
default.cs
<div class='e-btn-group'>
    @Html.EJS().Button("html").Content("HTML").Render()
    @Html.EJS().Button("css").Content("CSS").Disabled(true).Render()
    @Html.EJS().Button("javasript").Content("Javascript").Render()
</div>
<div class='e-btn-group'>
    @Html.EJS().Button("html").Content("HTML").Disabled(true).Render()
    @Html.EJS().Button("css").Content("CSS").Disabled(true).Render()
    @Html.EJS().Button("javasript").Content("Javascript").Disabled(true).Render()
</div>
public IActionResult Index()
    {
            return View();
    }

To disable radio/checkbox type ButtonGroup, the disabled attribute should be added to the particular input element.

Enable ripple

Ripple can be enabled by importing rippleEffect method from ej2-base and initialize rippleEffect with .e-btn-group element, and selector as e-btn.

The following example illustrates how to enable ripple for ButtonGroup.

razor
default.cs
<div class='e-btn-group'>
    @Html.EJS().Button("html").Content("HTML").Render()
    @Html.EJS().Button("css").Content("CSS").Render()
    @Html.EJS().Button("javacript").Content("Javascript").Render()
</div>
<script>
ej.base.enableRipple(true);
var button = document.querySelector('.e-btn-group');
ej.base.rippleEffect(button, {selector: 'e-btn'});
</script>
public IActionResult Index()
    {
            return View();
    }

Form submit

The name attribute of the input element is used to group the radio/checkbox type ButtonGroup. When the radio/checkbox type are grouped in the form, the checked items value attribute will be posted to the server on form submit that can be retrieved through the name. The disabled radio/checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

razor
default.cs
<form>
<div class='e-btn-group'>
    <input type="radio" id="male" name="gender" value="male" checked/>
    <label class="e-btn" for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female"/>
    <label class="e-btn" for="female">Female</label>
    <input type="radio" id="transgender" name="gender" value="transgender"/>
    <label class="e-btn" for="transgender">Transgender</label>
</div>
<button class='e-btn e-primary'>Submit</button>
</form>
<style>
.e-btn-group, button {
  margin: 20px 5px 20px 20px;
}
</style>
public IActionResult Index()
    {
            return View();
    }

Show ButtonGroup selected state on initial render

To show selected state on initial render, checked property should to added to the corresponding input element.

The following example illustrates how to show selected state on initial render.

razor
default.cs
<div class='e-btn-group'>
    <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
    <label class="e-btn" for="checkbold">Bold</label>
    <input type="checkbox" id="checkitalic" name="font" value="italic" />
    <label class="e-btn" for="checkitalic">Italic</label>
    <input type="checkbox" id="checkline" name="font" value="underline"/>
    <label class="e-btn" for="checkline">Underline</label>
</div>
public IActionResult Index()
    {
            return View();
    }