Checkboxes in a Treetable

I have an existing desktop Java application that I need to port over to Vaadin. This way, when updates are needed, I only have to update the server and not everyone’s client computer.

I have a screenshot of the current layout of the desktop application below. As you can see, it utilizes a treetable where each individual item can be selected, causing its parent checkbox to show a “partially selected” state. The parent could also be selected, which will cause all of the child elements to be selected as well. And, of course, each time something is selected / deselected, a change needs to be written to the database. Oh, and if the user tries to de-select a checkbox, a verification popup needs to appear asking the user if they are sure.

Is any of this possible with Vaadin? Because pretty much my entire decision to use Vaadin instead of JSF/PrimeFaces will depend upon this. Thank you.

I’ve implemented something similar with a Tree. We wanted a touch-friendly multi-select mode and implemented it with CSS-generated checkboxes. For this, I used setSelectable(false) on the Tree and set an ItemStyleGenerator to generate CSS style names for the various checkbox states (checked, unchecked, indeterminate).

I’m not sure if this can be done with a TreeTable however…

We will eventually need this entire interface to be touch-friendly, but that will be some time down the road. However, I do like the idea of making each line in the treetable tall enough to accomodate a finger so that an item could be either tapped or swiped when it is done and needs to be “checked off.”

So, as long as you are certain that this is possible with Vaadin, then I will make the decision to go ahead with learning it. I am still just an amateur Java and web developer; I still have a super-long way to go. Your mention of an ItemStyleGenerator is somewhat above my head, but hopefully I’ll soon learn enough to be able to understand and use it. I hope no one minds if I lean somewhat heavily on this forum to get this application ported.

I’ve just dived into the Table code, I think you should use setCellStyleGenerator which is basically the Table equivalent of what I used.

The CSS checkboxes I’ve created for this are based on the Valo theme so they look the same as normal CheckBox elements. If you’re interested, I could post the Sass code here.

By the way, I only have about half a year of Java/Vaadin experience but I’ve even got as far as developing some client-side code and I’m not that big a whizz kid. The forum has been a great help for me as well.

Thank you, Auke, but let me do some reading and get a decent handle on what I need to do with Vaadin first before I start copying & pasting code. I’ll let you know when I’m ready to tackle that. :~)

I’ve just taken a look at the new Grid component (added in 7.4), an improved Table-like component. Take a look here:

this blog post
Vaadin states that in 7.5 Grid will be expanded to support all the features that TreeTable has. Combined with the multi-select mode in the demo, it should provide what you need, so if you have a little patience your problem may be solved for you :wink:

Very nice! I will definitely keep an eye on it. And I can continue learning the core of Vaadin in the mean time. Thank you!

Hi, i tries to search same functionality but no solution found. So i implement my own multiselect mode, and hope my code can be helpful for someone who needed of this functionality (as starting point for research)

Here is my hierarchical container with checkbox column, you can extend it and use together with own your properties(example in project)

Not sure that it is perfect solution but its work. (I also tries implement it using checkbox value selection listeners approach which triggered according your hierarchy… but it works slow on big hierarchies)