Group Buttons
Last updated
Was this helpful?
Last updated
Was this helpful?
The Group Buttons component allows grouping a series of buttons on a single line.
To see a live sample of the component you can go .
dataprovider
is set as choice
Example:
In order to get a group buttons with orders' ship countries, the followings settings should be made:
Like most components, Group Buttons have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Group Buttons is the onDataChange
event, which is triggered when the component is clicked and the value is changed.
Group Buttons, like many components, can be modified at runtime through code. Below are a few examples of controlling a Group Buttons from code.
You can easily change the enabled
state of a Group Buttons at runtime.
Example:
You can easily change the visible
state of a Group Buttons at runtime.
Example:
You can easily change the valuelist
of a Group Buttons at runtime.
Example:
Like most components, a Group Buttons has API methods which can be called from code. Below is an example of common API calls.
Example:
The following articles are recommended for additional reading
In the , drag the Group Buttons component from the Pallet onto the form, then select a dataprovider and a valuelist.
If the component does not appear in the pallet, it means you do not have the Bootstrap Extra Components package installed. Click "Get more components" at the top of the pallet to open the and install it.
Group Buttons, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the component in the to see a list of properties in the . Below are some common properties and how to set them at design time.
See the reference docs for for a complete list of its .
Group Buttons dataprovider can be set after the component has been added to the form or by setting it in property, found in the .
Group Buttons input type can be set in property, found in the . It can be single select (RADIO
) or multi select (CHECKBOX
).
IMPORTANT!
When the Group Buttons property is set to CHECKBOX
, then property must be a variable that can contain multiples values, such as form or scope variable.
Example:
Group Buttons can be set it in property, found in the and it should match the set .
set the Group Buttons :
if is RADIO
, then can be either a table column (shipcountry
) or another type of dataprovider
if is CHECKBOX
, then must be a variable that can contain multiples values, such as form or scope variable
in case it doesn't exist, create a using Table values and shipcountry
column as dataprovider
set the countries list in property of the Group Buttons
To Handle the event, double-click the value for the property in the . You will see the . You'll have the option to select an existing Method or create a new Method. The method will be called when the Group Buttons's onDataChange
event is fired and the object will be passed to it.
See the for a comprehensive list of
You can easily add a style class to a Group Buttons using the method.
See the for a complete list of programmable and .