Uncheck checkbox inside a table externally

Wappler General How To
#1

Been searching for the forums for an answer to how I can click a button and deselect all checkboxes in a table.

I have a table with a checkbox in the first cell of each row. When the checkbox is checked/unchecked by clicking on it, the data in the row is added/removed from a datastore. When the datastore contains items I’m displaying a context menu where you can empty the datastore by clicking clear all. when clear all is clicked, I also need to uncheck all the checkboxes.

Screenshot 2023-06-02 at 8.45.55 AM
Screenshot 2023-06-02 at 8.45.55 AM2436×728 159 KB

I’ve tried placing the checkbox inside a form group, and inside a checkbox group and using reset as was suggested in this thread. Remove Check from Checkbox but no joy.

I’ve also tried setting select(false) on the dmx click event as was suggested here How to clear a single checkbox with button click? and here How Can I Deselect a Checkbox on-click?

dmx-on:click="datastore_sel_candidates.clear();inp_select.select(false)"

inp_select being the checkbox.

Wondering if this is to do with the checkbox being inside of a tabl? as suggested by @jellederijke here How to clear a single checkbox with button click? and not finding a solution to the same problem.

#2

Assuming you are using boolean 0 and 1 values where 1 is checked
In your click action after removing from the datastore you need to reset the checkbox value to 0 then refresh the checkbox using 2 stages
inp_select.setValue(0)
input1.select(input1.value==1)

Your code will be like this:

dmx-on:click=“input1.setValue(0);input1.select(input1.value==1)”

#3

Hi there @twinklemagoo…

I had a similar situation recently… I wanted a checkbox in a repeat to be selected or not based on the presence of a value in an array called these_templates… and I also wanted clicking on the checkbox to set or remove that value.

Here is the code I had… hopefully you can modify the array idea that I was using to make it directly relate to the data in your datastore!

Best wishes,
Antony.

<input id="i_add_price_template" name="add_template" class="input_checkbox" type="checkbox" 
dmx-on:updated="checked?these_templates.addUniq(id):these_templates.remove(id)" value="1"
dmx-bind:checked="these_templates.items.contains(id)?true:false">
#4

Thank you @Hyperbytes

I’m toggling the checkbox with a dynamic event, checked and unchecked respectively to insert and delete an entry in the datastore.

dmx-on:checked="datastore_sel_candidates.insert({talent_id: talent_id})" dmx-on:unchecked="datastore_sel_candidates.delete({talent_id: talent_id})"

So I’m not myself using a boolean, not sure how wappler knows how it’s checked or unchecked here?

#5

Thank you @Antony

I was thinking along the same lines, checking if the datastore contains the value of the table row and setting the checkbox to checked when it does. But I couldn’t figure out how to get the items of the datastore.

Works perfectly if I check if the datastore contains any values at all but that of course toggles ALL checkboxes on and off :sweat_smile:

Same as this works, but of course only checks one row.
dmx-bind:checked="(datastore_sel_candidates.data[0].talent_id == talent_id)

#6

I should say that this all works just fine when using an array, since I can check if the array contains the item. But it seems a shame not being able to use the datastore since one of the Wappler founders was quite enthused about using the datastore over arrays, so wanted to try it.

#7

Hi there @twinklemagoo…

Thanks for your replies… I would imagine that you can find a way to use the datastore, as it is just an array with multiple fields for each array item. Your repeat will have a $index value associated with it, so I would imagine you can use that in some kind of form like this:

dmx-bind:checked="(datastore_sel_candidates.data[$index].talent_id == talent_id)

Or maybe something of this form using a .where(), where X is a field in the datastore, and Y is a value in your repeated data:

dmx-bind:checked="(datastore_sel_candidates.data.where('X' Y, '==')[0].talent_id == talent_id)

(ignore my .where syntax as I can never remember which sorts of quotes go in different situations, and it different whether inside or outside of a flow!)

I have a very complex event booking form application where I’ve used 5 different data stores and they have literally saved the day in terms of what I can do with them… I believe it is well worth the effort to find all the ways to integrate them.

You may find that they stretch the capabilities of the GUI in terms of creating the right code… as I start to do more and more complex things like this I tend to just hand write the code as I can then very easily see what I am working with.

Data stores can also get a bit upset if you start changing the name of the items within them… you may find yourself creating one, working with it, and then just creating another one with a slightly different name to get around that.

Good luck with it all!

Best wishes,
Antony.

#8

Thank you @Antony yeah I’ll probably go back to try it again here or use it for a different function where it makes sense. All I’m really doing in this case is storing an ID and then saving it to the db. So datastore might be a bit over the top anyway.

But really appreciate that explanation and heads up for potential issues.

1 Like