Behavior settings

28 Nov 20174 minutes to read

Groupbutton provides options through which you can customize the default behavior of Groupbutton control.

Groupbutton Mode

The default behavior of Groupbutton is like Radiobutton, i.e., only one item can be selected at a time.

HTML

<ej:GroupButton ID="GroupButton2" runat="server" GroupButtonMode="RadioButton"  Size="Large">
<Items>
<ej:GroupButtonItem Text="Daily"></ej:GroupButtonItem>
<ej:GroupButtonItem Text="Weekly"></ej:GroupButtonItem>
<ej:GroupButtonItem Text="Monthly"></ej:GroupButtonItem>
</Items>
</ej:GroupButton>

RadioButton mode

To enable selection of one or more Groupbutton items at a time, you can set the Groupbutton mode to Checkbox. With this, you can toggle the each button’s state to perform actions, since all the button will behave like individual buttons.

HTML

<ej:GroupButton ID="GroupButton2" runat="server" GroupButtonMode="CheckBox" Size="Large">
<Items>
<ej:GroupButtonItem Text="Daily"></ej:GroupButtonItem>
<ej:GroupButtonItem Text="Weekly"></ej:GroupButtonItem>
<ej:GroupButtonItem Text="Monthly"></ej:GroupButtonItem>
</Items>
</ej:GroupButton>

CheckBox mode

SelectedItemIndex

The state of the button can be changed by clicking on the button. Also the selection state of the button can be achieved by using SelectedItemIndex API which is used to select the button items in GroupButton based on index.

This property will accept the array values and its value will be differ based on current mode of Button. If the Button mode is “Radio”, then the selected items can have single value within the array, since we can select a single button only in this mode. Whereas for the “checkbox” mode, the selectedItemIndex can have the multiple values within an array, since multiple button can be in active state in this mode.

Setting SelectedItemIndex for RadioButton Mode

HTML

<ej:GroupButton ID="GroupButton2" runat="server" GroupButtonMode="RadioButton"  Size="Large">
        <Items>
            <ej:GroupButtonItem Text="Daily"></ej:GroupButtonItem>
            <ej:GroupButtonItem Text="Weekly"></ej:GroupButtonItem>
            <ej:GroupButtonItem Text="Monthly"></ej:GroupButtonItem>
        </Items>
    </ej:GroupButton>

C#

public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           List<int> index = new List<int>();
            index.Add(2);
            this.GroupButton2.SelectedItemIndex = index;
		}
    }

RadioButton mode

Setting SelectedItemIndex for CheckBox Mode

HTML

<ej:GroupButton ID="GroupButton2" runat="server" GroupButtonMode="CheckBox"  Size="Large">
        <Items>
            <ej:GroupButtonItem Text="Daily"></ej:GroupButtonItem>
            <ej:GroupButtonItem Text="Weekly"></ej:GroupButtonItem>
            <ej:GroupButtonItem Text="Monthly"></ej:GroupButtonItem>
        </Items>
    </ej:GroupButton>

C#

public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           List<int> index = new List<int>();
            index.Add(0);
            index.Add(2);
            this.GroupButton2.SelectedItemIndex = index;
		}
    }

CheckBox mode