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.

To use createButtonGroup util function, SplitButton dependencies should be configured and added in system.config.js and it should also be imported in app.ts file.

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 in index.html file.

Create radio type ButtonGroup

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

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 function for basic, checkbox, and radio type behaviors.

Source
Preview
index.js
index.html
styles.css
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'}
    ]
});
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
         <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 0 5px 5px 5px;
}

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

To create ButtonGroup with icons, span element should be added inside each button element with e-btn-icon and e-icon-left along with icon classes.

The following example illustrates how to create ButtonGroup with icons.

Source
Preview
index.html
styles.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="buttongroup" class="e-btn-group">
            <button class="e-btn">
                <span class="e-btn-icon e-icon-left e-icons e-left-icon"></span>Left
            </button>
            <button class="e-btn">
                <span class="e-btn-icon e-icon-left e-icons e-middle-icon"></span>Center
            </button>
            <button class="e-btn">
                <span class="e-btn-icon e-icon-left e-icons e-right-icon"></span>Right
            </button>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.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';
}

Create ButtonGroup with rounded corner

The ButtonGroup with rounded corner has round edges on both side. In the 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.

Source
Preview
index.html
styles.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="e-btn-group e-round-corner">
            <button class="e-btn">HTML</button>
            <button class="e-btn">CSS</button>
            <button class="e-btn">Javascript</button>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

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.

Source
Preview
index.html
styles.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="e-btn-group e-rtl">
            <button class="e-btn">HTML</button>
            <button class="e-btn">CSS</button>
            <button class="e-btn">Javascript</button>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

Disable

Particular button

To disable a particular button in a ButtonGroup, disabled attribute should be added to the 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.

Source
Preview
index.html
styles.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="e-btn-group">
            <button class="e-btn">HTML</button>
            <button class="e-btn" disabled>CSS</button>
            <button class="e-btn">Javascript</button>
        </div>
        <div class="e-btn-group">
            <button class="e-btn" disabled>HTML</button>
            <button class="e-btn" disabled>CSS</button>
            <button class="e-btn" disabled>Javascript</button>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

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.

Source
Preview
index.js
index.html
styles.css
ej.base.enableRipple(true);

var button = document.querySelector('.e-btn-group');
ej.base.rippleEffect(button, { selector: '.e-btn' });
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="buttongroup" class="e-btn-group">
            <button class="e-btn">HTML</button>
            <button class="e-btn">CSS</button>
            <button class="e-btn">Javascript</button>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

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.

Source
Preview
index.html
styles.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group, button {
  margin: 20px 5px 20px 20px;
}

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.

Source
Preview
index.html
styles.css
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 CheckBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}