Your search did not match any results.

Button Group

Documentation

ButtonGroup is a UI component that displays a set of toggleable buttons and allows a user to select one or several of them. This demo illustrates how to configure the ButtonGroup to enable single and multiple selection.

To get started with the DevExtreme ButtonGroup component, refer to the following tutorial for step-by-step instructions: Getting Started with ButtonGroup.

Backend API
<div class="buttongroups-container"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("alignment") .StylingMode(ButtonStylingMode.Outlined) .Items(items => { items.Add().Icon("alignleft").Hint("Align left").Option("alignment", "left"); items.Add().Icon("aligncenter").Hint("Center").Option("alignment", "center"); items.Add().Icon("alignright").Hint("Align right").Option("alignment", "right"); items.Add().Icon("alignjustify").Hint("Justify").Option("alignment", "justify"); }) .SelectedItemKeys(new[] { "left" }) .OnItemClick("buttonGroup_ItemClick") ) @(Html.DevExtreme().ButtonGroup() .KeyExpr("style") .StylingMode(ButtonStylingMode.Outlined) .SelectionMode(ButtonGroupSelectionMode.Multiple) .Items(items => { items.Add().Icon("bold").Hint("Bold").Option("style", "bold"); items.Add().Icon("italic").Hint("Italic").Option("style", "italic"); items.Add().Icon("underline").Hint("Underlined").Option("style", "underline"); items.Add().Icon("strike").Hint("Strikethrough").Option("style", "strike"); }) .OnItemClick("buttonGroup_ItemClick") ) </div> <div class="buttongroups-container"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("alignment") .StylingMode(ButtonStylingMode.Text) .Items(items => { items.Add().Icon("alignleft").Hint("Align left").Option("alignment", "left"); items.Add().Icon("aligncenter").Hint("Center").Option("alignment", "center"); items.Add().Icon("alignright").Hint("Align right").Option("alignment", "right"); items.Add().Icon("alignjustify").Hint("Justify").Option("alignment", "justify"); }) .SelectedItemKeys(new[] { "left" }) .OnItemClick("buttonGroup_ItemClick") ) <div class="multiple-selection-styling-mode"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("style") .StylingMode(ButtonStylingMode.Text) .SelectionMode(ButtonGroupSelectionMode.Multiple) .Items(items => { items.Add().Icon("bold").Hint("Bold").Option("style", "bold"); items.Add().Icon("italic").Hint("Italic").Option("style", "italic"); items.Add().Icon("underline").Hint("Underlined").Option("style", "underline"); items.Add().Icon("strike").Hint("Strikethrough").Option("style", "strike"); }) .OnItemClick("buttonGroup_ItemClick") ) </div> </div> <script> function buttonGroup_ItemClick(e) { DevExpress.ui.notify({ message: 'The "' + e.itemData.hint + '" button was clicked', width: 320 }, "success", 1000); } </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ButtonGroupController : Controller { public ActionResult Overview() { return View(); } } }
.buttongroups-container { display: flex; justify-content: center; font-size: 16px; } .buttongroups-container > div { padding: 0 12px; } .buttongroups-container:first-child { margin-top: 120px; margin-bottom: 40px; } .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; border-color: #dddddd; }