Control the selected state of a checkbox in a list view using a "Select All" checkbox

App Building
1

I have a List View populated with the results of a JSON response from a REST API GET request. My List View is populating just fine dynamically (using data.length).

For every item in my list view, I want to create a check box addProductCheckbox that the user can select. The purpose of this check box is to select the individual items that the user can then subsequently click on another button to import the selected items' data into a database table.

To make this more convenient for the user, I also want to have a couple other things:

image
image992×469 89.2 KB

  1. A "Select All" checkbox at the top of the list view that sets all the individual list view checkboxes to be selected/unselected accordingly

image
image704×673 35 KB

  1. To trigger the data import of the selected items into the database, the user has to click another button called Add Products. I want this button to be disabled unless at least 1 item in the list view is selected.

Here are the issues I'm experiencing:

  • I've read other posts that mention the contents of the List View can be accessed via listview.data, but mine returns a list of objects each of which contains an undefined JSON attribute key. See first screenshot.
  • The 2 event handlers I created on the Select All checkbox (if set to true, then set all addProductCheckbox to true, and if set to false, set all addProductCheckbox to false) does not work. See second screenshot.
  • I have no idea how to define a boolean expression in the Add Products button that evaluates to true if at least 1 of the addProductCheckbox components is selected. I don't even know how to access an array containing the values of these components!

image

image
image635×615 39.1 KB

2

Hello, Here is my solution.
first defined a variable named variable1,
then bind it to the checkbox in the listview as default value.
When check selectall checkbox, set variable1 value to true
when uncheck selectall checkbox, set variable1 value to false.

in the add product button's disable property using js(lodash) to find if there is at least one was checked. if all uncheck, disable the button.
Here is git screen shot for your reference.

Animation

2 Likes