Your search did not match any results.
ButtonGroup

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="dx-fieldset"> <div class="dx-field"> <div class="dx-field-value"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("alignment") .StylingMode(ButtonStylingMode.Outlined) .Items(items => { items.Add().Icon("alignleft").Option("alignment", "left"); items.Add().Icon("aligncenter").Option("alignment", "center"); items.Add().Icon("alignright").Option("alignment", "right"); items.Add().Icon("alignjustify").Option("alignment", "justify"); }) ) </div> </div> <div class="dx-field"> <div class="dx-field-value"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("style") .StylingMode(ButtonStylingMode.Outlined) .SelectionMode(ButtonGroupSelectionMode.Multiple) .Items(items => { items.Add().Icon("bold").Option("style", "bold"); items.Add().Icon("italic").Option("style", "italic"); items.Add().Icon("underline").Option("style", "underline"); items.Add().Icon("strike").Option("style", "strike"); }) ) </div> </div> </div> <div class="dx-fieldset dx-buttongroup-mode-text"> <div class="dx-field dx-theme-border-color dx-demo-separator"> <div class="dx-field-value"> <div class="dx-field-value"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("alignment") .StylingMode(ButtonStylingMode.Text) .Items(items => { items.Add().Icon("alignleft").Option("alignment", "left"); items.Add().Icon("aligncenter").Option("alignment", "center"); items.Add().Icon("alignright").Option("alignment", "right"); items.Add().Icon("alignjustify").Option("alignment", "justify"); }) ) </div> </div> </div> <div class="dx-field"> <div class="dx-field-value"> @(Html.DevExtreme().ButtonGroup() .KeyExpr("style") .StylingMode(ButtonStylingMode.Text) .SelectionMode(ButtonGroupSelectionMode.Multiple) .Items(items => { items.Add().Icon("bold").Option("style", "bold"); items.Add().Icon("italic").Option("style", "italic"); items.Add().Icon("underline").Option("style", "underline"); items.Add().Icon("strike").Option("style", "strike"); }) ) </div> </div> </div>
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(); } } }
.dx-viewport:not(.dx-theme-ios7) .dx-fieldset { width: 420px; margin: 30px auto; } .dx-viewport:not(.dx-theme-ios7) .dx-fieldset:first-child { margin-top: 120px; } .dx-viewport:not(.dx-theme-ios7) { font-size: 16px; } .dx-viewport:not(.dx-theme-ios7) .dx-field { display: inline-block; } .dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-widget) > .dx-button { float: none; } .dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button), .dx-viewport:not(.dx-theme-ios7) { float: none; width: 100%; } .dx-viewport:not(.dx-theme-ios7) { padding-left: 0; } .dx-field:first-child { padding-right: 10px; } .dx-field:last-child { padding-left: 10px; } .dx-buttongroup-mode-text .dx-field:first-child { padding-right: 11px; } .dx-buttongroup-mode-text .dx-field:last-child { padding-left: 9px; } .dx-demo-separator { border-right-width: 1px; border-right-style: solid; }