checkboxTree - Auto Height, Length, Control Component, Saving Values?

App Building
1

I would like to use checkboxTree as a checklist.

Is it possible to make the height Auto?
If it's fixed it's either too big, once child items are displayed or the scroll bars don't match what I would like.

How can I get the value using JavaScript for the total number of keys?
For example, I see the values here, but don't know the syntax to retrieve the value.

image

{{checkboxTree2.length}} <- what should this be?

Control Another Component
I'm thinking of having the checkboxTree in a collapsibleContainer. I like the look of the checkboxTree but not being able to do auto height is complicating the design. So I was thinking of a single checkbox (or different images/text) controlled by the status of of the checkboxTree.

  • None selected - unchecked checkbox, or image 1/text displayed
  • Some selected - bold border to checkbox, or image 2/text displayed
  • All Selected - checked checkbox, or image 1/text displayed

To do that I need to do a calculation based on the total number of keys and the number checked. Any suggestions?

Saving checkboxTree values
If someone selects one of the items, how could I save that state back to a database, so that it loads in the same state next time?
I can write the SQL, just not sure if my options are to put the checkboxTree in a form and require a submit to trigger the database update, of if it's possible to save the state dynamically somehow with event handlers.

Thanks,
Jon.

2

Hi @jonj Thanks for reaching out! Let me know if this is helpful :blush:

Is it possible to make the height Auto?

It doesn't look like it :thinking: I'll submit a feature request internally!

How can I get the value using JavaScript for the total number of keys?

If you click into each of those items to expand them, you can see the properties available to you.

For example, if you wanted the length of the checked items, you could do {{checkboxTree2.checked.length}}

If you want the length of all parent & child items, you could use a JS query like this:

const shoes = checkboxTree2.structure
const getShoes = (shoesArray)=>{
  if(!shoesArray.children || !shoesArray.children.length){
    return shoesArray;
  }
  return [shoesArray, _.flatMapDeep(shoesArray.children, getShoes)];
}

return _.flatMapDeep(shoes, getShoes).length

Control Another Component
For total number of keys, see above. For number of checked, you can use the checked property

Saving checkboxTree values

You could use event handlers to trigger an update SQL query every time the checkbox tree changes:

1 Like
3

Hi @Tess

Many thanks for your answer, that's really helpful and you have helped answer all my questions (I now also have a good workaround for the auto height aspect, with the other answers)!!

The JavaScript for finding the total number of parent & child items, was especially helpful. I wouldn't have ever guessed, or be able to write, that.

Thanks very much for your help. :blush:
Jon.

1 Like