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.
To create a basic ButtonGroup, the target element along with the button elements should be created.
To create a radio type ButtonGroup, the target element along with the input elements should be created with type radio.
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.
<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 ActionResult Index()
{
return View();
}If null value is passed in button options, then that particular button will be skipped from processing in
createButtonGrouputil function.