DevExtreme – New ButtonGroup Component (v18.2)

A new DevExtreme component has been added to the latest release: ButtonGroup. It consists of a set of toggle buttons and has both single and multi-select modes. Let's take a look.

DevExtreme ButtonGroup Component

Note: This feature is available in DevExtreme for Angular, Vue, React, jQuery, and ASP.NET MVC and ASP.NET Core.

ButtonGroup

The new ButtonGroup is a simple but useful component which displays a set of buttons that allows an end-user to select one or several of them.

Easy customization

Configuration is easy and powerful:

$("#button-group").dxButtonGroup({
   items: [{
      icon: "alignleft",
      alignment: "left"
   }, {
      icon: "alignright",
      alignment: "right"
   }], 
   keyExpr: "alignment"
});

Selection Modes

ButtonGroup supports two selection modes – single and multiple. Set the selectionMode property to one of these options:

$("#button-group").dxButtonGroup({
   // …
   selectionMode: "single" | "multiple"
});

Appearance

ButtonGroup supports three new button styling modes:

DevExtreme DateBox - Button Styling

Use the stylingMode property to select one of these:

$("#button-group").dxButtonGroup({
   // …
   stylingMode: 'text' | 'outlined' | 'contained'
});

Documentation

Take a look at the DevExtreme ButtonGroup documentation to learn more.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@18.2-unstable

Then let us know your experience with the DevExtreme ButtonGroup.

Note: After the final v18.2 release, please remove the -unstable suffix

Join the Webinar

Sign up for the upcoming "New in v18.2 - DevExtreme HTML / JS Controls" webinar where:

  • you'll see all the new features/tools/components in v18.2 and
  • you can ask questions and interact with our devs

Register today: https://attendee.gotowebinar.com/register/1534319392881688322

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

4 comment(s)
Andrey Domrachev

very good!

6 November, 2018
T Schoute

Can this also be used in combination with a dxToolBar? In other words, is it possible to add a dxButtonGroup to the items array of a dxToolBar?

7 November, 2018
Alex B (DevExpress)

> is it possible to add a dxButtonGroup to the items array of a dxToolBar?

Yes, it's possible.

7 November, 2018
Miro Mz

Great addition!

8 November, 2018

Please login or register to post comments.