<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.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ButtonGroupController : Controller {
public IActionResult 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;
}