Selection and Nesting

19 Dec 20223 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.

<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>

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.

<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>

Nesting

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

  • DropDownButton
  • SplitButton

To initialize DropDownButton component refer DropDownButton Getting Started documentation.

@{
    List<object> items = new List<object>();
    items.Add(new
    {
        text = "Learn SQL"
    });
    items.Add(new
    {
        text = "Learn PHP"
    });
    items.Add(new
    {
        text = "Learn Bootstrap"
    });
}

<div class='e-btn-group'>
    <ejs-button id="html" content="HTML"></ejs-button>
    <ejs-button id="css" content="CSS"></ejs-button>
    <ejs-button id="javascript" content="Javascript"></ejs-button>
    <ejs-dropdownbutton id="element" content="More" items="@items"></ejs-dropdownbutton>
</div>

SplitButton

To initialize SplitButton component refer SplitButton Getting Started documentation.

@{
    List<object> items = new List<object>();
    items.Add(new
    {
        text = "Paste"
    });
    items.Add(new
    {
        text = "Paste Text"
    });
    items.Add(new
    {
        text = "Paste Special"
    });
}

<div class='e-btn-group'>
    <ejs-button id="cut" content="Cut"></ejs-button>
    <ejs-button id="copy" content="Copy"></ejs-button>
   <ejs-splitbutton id="element" content="Paste" items="@items"></ejs-splitbutton>
</div>

NOTE

View Sample in GitHub.

See also