Control bootstrap classes from multiple conditions

Wappler General Need Help
1

I have a bootstrap 5 project with a row that has repeat children, each iteration has 4 columns, and am using the row class row-cols-4 to ensure my 4 columns take up full width of row.
Each row represents a single record from DB, therefore the 4 columns should always be in a single row.

3 of the 4 columns display is controlled by that columns own check box, if checked then display that column, if unchecked then hide it.

What I am struggling with is how to dynamically control the row class row-cols-4 to ensure each DB record remains on its own display row

eg if no columns are hidden then row class = row-cols-4
if any 1 column is hidden then row class = row-cols-3
if any 2 columns are hidden then row class = row-cols-2

This has got me stumped, anyone have any ideas, or any other suggestions?

2

Hi. Seems like you need to apply multiple conditional classes.

dmx-class:row-col-4="var1.value==0" dmx-class:row-col-3="var1.value==1"....

Here, I am assuming you have a variable which has the count of hidden columns.

3

I did go down that path, had a variable setup to track the number based on checked box checked values from dynamic event, but then stopped as when new record is selected whole different logic is required and thought that it was becoming more complex than it needed to be, thought there was a better way to achieve my goal.

4

In the context of what you have shared here, dynamic class makes sense.
Maybe share more details.

5

Thank you sid, got a bit bogged down, and thought I was overlooking the obvious. You have confirmed the answer and I will go down that track, thank you for your time and assistance it is appreciated.

6

Ok, got that part to work, I have 1 variable that is seeded with value of 1.
On dynamic event of value changed for all 3 checkboxes I increment my variable by 1 if checked = true, and decrement by 1 if checked is false, and that is fine.

The next bit I am not sure of where to go.

When I load the record from the DB on the page the checked value for the 3 checkboxes are populated from the DB.

How do I seed the variable with these database checked values?

7

You can do a set value fo variable on success of server connect which gives you the data.

8

Thank you sid, will give that a go in the morning

9

That did the trick @sid, exactly as you described, thank you so much.