Multistate Button - Grid orientation in Perspective

Ignition
,
1

Hello all,

I have a requirement where I have to create a grid (multiple rows and columns) of buttons from which only one can be selected. The multistate buttons seems to be an option but I am not able to create a grid.

Is there a way to create multiple row and column grid using multistate button in ignition perspective ?

2
  • Make a multistate button with six or more buttons in it.
  • Save the project and launch it in your browser.
  • Hit F12 for Developer Tools, click the Inspect button and select the Multistate Button component on your web page. It should highlight the relevant code as shown below and reveal the style.

Multistate button wrap
Multistate button wrap891×298 39.7 KB

I played with the height and width and added the flex-wrap rule. Play around with those until you get what you want and then back in Designer set the width and height and add rules in the Multistate component's style for anything else you need.

3

This is a little ambiguous. Do you mean that selecting any button should un-select any others, or that once a button is selected no others should allow for clicking until they are all reset?

You can pretty easily manage this with a Column Container via some quick scripting and Message Handling. I've attached a View resource which demos the behavior, assuming your goal requirement is "Once a button from the set is clicked, any subsequent click should remove the previous selection."

Note that my example does not have any selected by default, though you could manage that in any number of ways depending on your requirements.
ButtonSelectionGridExampleView.zip (24.6 KB)