Your search did not match any results.
Button Group

Button Group

ButtonGroup is a widget 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 widget to enable single and multiple selection.

<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"); }) .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"); }) .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; }