JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Selection and Nesting in JavaScript ButtonGroup control

08 May 2023 / 3 minutes to read

Selection

Single selection

ButtonGroup supports radio type selection in which only one button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with for attribute inside the target element. In this ButtonGroup, the type of the input element should be radio and e-btn is added to the label element.

The following example illustrates the single selection behavior in ButtonGroup.

Source
Preview
index.html
styles.css
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Button-Group</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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='e-btn-group'>
            <input type="radio" id="radioleft" name="align" value="left" />
            <label class="e-btn" for="radioleft">Left</label>
            <input type="radio" id="radiomiddle" name="align" value="middle" />
            <label class="e-btn" for="radiomiddle">Center</label>
            <input type="radio" id="radioright" name="align" value="right"/>
            <label class="e-btn" for="radioright">Right</label>
        </div>
    </div>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
}

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

Multiple selection

ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with for attribute inside the target element. In this ButtonGroup, the type of the input element should be checkbox and e-btn is added to the label element.

The following example illustrates the multiple selection behavior in ButtonGroup.

Source
Preview
index.html
styles.css
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Button-Group</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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='e-btn-group'>
            <input type="checkbox" id="checkbold" name="font" value="bold"/>
            <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>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
}

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

Nesting

Nesting with other components can be possible in ButtonGroup. The following components can be nested in ButtonGroup.

  • DropDownButton
  • SplitButton

For nesting support, SplitButton dependencies should be configured and added in system.config.js.

To initialize DropDownButton component, refer DropDownButton Getting Started documentation.

In the following example, the DropDownButton component can be added by creating button element with ID as dropdownelement in index.htmland import the DropDownButton in script file, and initialize with the dropdownelement.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { DropDownButton, ItemModel, DropDownButtonModel } from '@syncfusion/ej2-splitbuttons';

let items: ItemModel[] = [
{
text: 'Learn SQL'
},
{
text: 'Learn PHP'
},
{
text: 'Learn Bootstrap'
}];

let menuOptions: DropDownButtonModel = {
items: items
};

// To render DropDownButton.
let btnObj: DropDownButton = new DropDownButton(menuOptions);
btnObj.appendTo('#dropdownelement');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Button-Group</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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='e-btn-group'>
            <button class='e-btn'>HTML</button>
            <button class='e-btn'>CSS</button>
            <button class='e-btn'>Javascript</button>
            <button class='e-btn' id='dropdownelement'>More</button>
        </div>
    </div>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
}

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

SplitButton

To initialize SplitButton component, refer SplitButton Getting Started documentation.

In the following example, the SplitButton component can be added by creating button element with ID as splitbuttonelement in index.htmland import the SplitButton in app.ts file, and initialize with the splitbuttonelement.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';

let items: ItemModel[] = [
{
text: 'Paste'
},
{
text: 'Paste Text'
},
{
text: 'Paste Special'
}];

// To render SplitButton.
let btnObj: SplitButton = new SplitButton({items: items});
btnObj.appendTo('#splitbuttonelement');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Button-Group</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/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='e-btn-group'>
            <button class='e-btn'>Cut</button>
            <button class='e-btn'>Copy</button>
            <button class='e-btn' id='splitbuttonelement'>Paste</button>
        </div>
    </div>
</body>

</html>
Copied to clipboard
#container {
    visibility: hidden;
}

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

See Also

Previous
Next