Version: 2.0 |

ButtonGroup

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders the Bootstrap button group widget.

Properties

Name Type Description Notes Default Value
ClickBinding ICommandBinding Gets or sets a binding which defines a click action for button items.
attribute
inner element
static value
bindable
default
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
IsEnabledBinding IValueBinding Gets or sets a value binding that points to a property indicating whether the item is disabled or not.
attribute
inner element
static value
bindable
default
IsVertical Boolean Gets or sets whether the button group is rendered in the vertical mode.
attribute
inner element
static value
bindable
default
False
Items List<IButtonGroupItem> Gets or sets a collection of items that is used when no DataSource is set.
attribute
inner element
static value
bindable
default
ItemsContentTemplate ITemplate Gets or sets the template for contents of the generated items when using the DataSource property.
attribute
inner element
static value
bindable
default
Size Size Gets or sets the size of the buttons in the button group.
attribute
inner element
static value
bindable
default
Default
TextBinding IValueBinding Gets or sets the value binding that points to a property which will be used as the text of the item.
attribute
inner element
static value
bindable
default
TypeBinding IValueBinding Gets or sets the value binding that points to a property which will be used as the Type of the item.
attribute
inner element
static value
bindable
default
VisualStyleBinding IValueBinding Gets or sets the value binding that points to a property which will be used as the VisualStyle of the item.
attribute
inner element
static value
bindable
default

Events

Name Type Description

Usage & Scenarios

Renders a group of Bootstrap buttons. The group can be used separately, or within a ButtonToolbar control.

https://getbootstrap.com/docs/4.1/components/button-group/

HTML Rendered by the Control

Sample 1: ButtonGroup Size

The Size property specifies the sizing of the buttons. The available sizes are: Default, Small and Large.

Be sure to use the <bs:Button> instead of the <dot:Button> controls inside the button group.

You can also use <bs:DropDownButton>, <bs:ButtonGroupCheckBox> or <bs:ButtonGroupRadioButton> inside.

<bs:ButtonGroup Size="Large">
  <bs:Button Click="{command: DoSomething()}" Text="Button 1" />
  <bs:Button Click="{command: DoSomething()}" Text="Button 2" />
  
  <bs:DropDownButton Text="Dropdown">
    <Items>
      <bs:DropDownButtonItem NavigateUrl="https://www.google.com">
        Google
      </bs:DropDownButtonItem>
      <bs:DropDownButtonItem NavigateUrl="https://www.youtube.com">
        Youtube
      </bs:DropDownButtonItem>
    </Items>
  </bs:DropDownButton>
</bs:ButtonGroup>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ButtonGroup.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {

        public void DoSomething()
        {
        }
    }
}

Sample 2: Vertical Buttons

The IsVertical property switches the ButtonGroup control into the vertical mode.

<bs:ButtonGroup IsVertical="true">
  <bs:Button Click="{command: DoSomething()}" Text="Button 1" />
  <bs:Button Click="{command: DoSomething()}" Text="Button 2" />
  <bs:Button Click="{command: DoSomething()}" Text="Button 3" />
  <bs:Button Click="{command: DoSomething()}" Text="Button 4" />
</bs:ButtonGroup>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ButtonGroup.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {

        public void DoSomething()
        {
        }
    }
}

Sample 3: CheckBoxes and RadioButtons in the ButtonGroup

The ButtonGroup also supports ButtonGroupCheckBox and ButtonGroupRadioButton.

Make sure you are using <bs:ButtonGroupCheckBox> and <bs:ButtonGroupRadioButton> instead of classic or Bootstrap CheckBox and RadioButton controls.

<bs:ButtonGroup>
  <bs:ButtonGroupCheckBox Text="CheckBox 1" Checked="{value: Checked1}" />
  <bs:ButtonGroupCheckBox Text="CheckBox 2" Checked="{value: Checked2}" />
</bs:ButtonGroup>

<p>CheckBox 1:{{value: Checked1}}</p>
<p>CheckBox 2:{{value: Checked2}}</p>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ButtonGroup.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {

        public bool Checked1 { get; set; }

        public bool Checked2 { get; set; }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message