Group Controls Data-dynamic events (dmx-on:updated)

Feature Request
#1

Hey guys,

I have used a lot of group controls (is="dmx-radio-group" , is="dmx-checkbox-group" etc) and a thing that is annoying is that I cannot handle through the UI their Data-Dynamic Events.
Although Wappler handles the dmx-on:updated event, I cannot manipulate it through the UI.
I’m just attaching it to a child input (radio or chebox) and manipulate it and then cut it from there and paste it to the Group…

So, once it is already handled from Wappler why not handled through the UI?

#2

So is a simple example of what you want…

To click on a button and change the state of a checkbox?

#3

Hey @Antony,

As you mentioned checkbox I will go with that…
A checkbox input has dynamic events and at the bottom has Data Events:

image
image371×623 24.7 KB

This option does not exist on the UI for the groups…
When you want to handle the update of the whole group you cannot assign the dmx-on:updated event from the wappler UI BUT you can hardcode it and wappler handles it.

I have a small example here:

<div class="container mt-5">
        <div class="row">
            <form id="form1">
                <div class="form-group mb-3 p-2 border border-primary" id="radio_group" is="dmx-radio-group" dmx-on:updated="notifies1.info(value)">
                    <legend class="col-auto pb-0 col-form-label border-bottom border-dark">Some radios</legend>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" value="radio1" id="radio_1" name="input1">
                        <label class="form-check-label" for="radio_1">First radio</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" value="radio2" id="radio_2" name="input1">
                        <label class="form-check-label" for="radio_2">Second radio</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" value="radio3" id="radio_3" name="input1">
                        <label class="form-check-label" for="radio_3">Third radio</label>
                    </div>
                </div>
                <div class="form-group mb-3 p-2 border border-primary" id="check_group" is="dmx-checkbox-group" dmx-on:updated="notifies1.danger(value)">
                    <legend class="col-auto pb-0 col-form-label border-bottom border-dark">Some checkboxes</legend>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="check1" id="check_1" name="check_1">
                        <label class="form-check-label" for="check_1">First checkbox</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="check2" id="check_2" name="check_1">
                        <label class="form-check-label" for="check_2">Second checkbox</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="check3" id="check_3" name="check_1">
                        <label class="form-check-label" for="check_3">Third checkbox</label>
                    </div>
                </div>
            </form>
        </div>
    </div>

In that simple example it just pops a simple Notification but imagine if you want to do a condition and depending that show a modal and…and…

1 Like