Selection and Nesting
19 Dec 20224 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>
public ActionResult Index()
{
return View();
}
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>
public ActionResult Index()
{
return View();
}
Nesting
Nesting with other components can be possible in ButtonGroup. The following components can be nested in ButtonGroup.
- DropDownButton
- SplitButton
DropDownButton
To initialize DropDownButton component refer DropDownButton Getting Started documentation.
<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()
@Html.EJS().DropDownButton("element").Content("More").Items((IEnumerable<object>)ViewBag.items).Render()
</div>
public ActionResult Index()
{
// Define the array of JSON
List<object> items = new List<object>();
items.Add(new
{
text = "Learn SQL"
});
items.Add(new
{
text = "Learn PHP"
});
items.Add(new
{
text = "Learn Bootstrap"
});
ViewBag.items = items;
return View();
}
SplitButton
To initialize SplitButton component refer SplitButton Getting Started documentation.
<div class='e-btn-group'>
@Html.EJS().Button("Cut").Content("Cut").Render()
@Html.EJS().Button("Copy").Content("Copy").Render()
@Html.EJS().SplitButton("element").Content("Paste").Items((IEnumerable<object>)ViewBag.items).Render()
</div>
public ActionResult Index()
{
// Define the array of JSON
List<object> items = new List<object>();
items.Add(new
{
text = "Paste"
});
items.Add(new
{
text = "Paste Text"
});
items.Add(new
{
text = "Paste Special"
});
ViewBag.items = items;
return View();
}
NOTE