Tree with Checkboxes

advanced-prototyping
repeater-widget
#1

I am trying to replicate this behavior of this UI Component: https://demos.telerik.com/kendo-ui/treeview/checkboxes

What I am not able to do is:

  • based upon selection of a child node - set the “mixed” state of all parent nodes that lead to the selected child node or nodes

  • when I select a parent node to select all children for all child nodes

Here is where I am up to:
TreeWithCheckboxes.rp (100.6 KB)

Https://forum.axure.com/t/tree-with-checkboxes/56711?u=justin1
#2

when I select a parent node to select all children for all child nodes
this point is working

#3

What did you do in order to support the behavior I;m looking for?

#4

Hey Daniel, could you achieve this? That’s exactly what i’m currently looking for…

#5

Not yet, I haven’t been able to solve this one on my own

#6

Ok, thanks for quick answer.
I’ll let you know if I can bring progress into this.

#7

Hi! I took a look at your file and came up with some modifications that get your file most of the way there.

To get a parent node to select all children, you can leverage the values stored in [[Item.Path]] (which is what tells the prototype what is a parent and what is a child) and use Update Rows to update the Checkbox column to “Checked” for all rows that contain the same value as what [[Item.Path]] has for the current row. E.g. if you click on the checkbox for the row that has the path value “01.01.01”, it will update the Checkbox column for the rows with path values “01.01.01.01” and “01.01.01.02”. Here’s the rule for that interaction:

 [[TargetItem.Path.indexOf(Item.Path) >= 0]]

To get a selected child node checkbox to put the parent nodes above it into a “mixed” state, you can update the Checkbox column to “Mixed” for any rows where [[Item.index]] is less than that of the current row (e.g. the rows above the current row) and where the length of the Path value for those rows is less than the length of the Path value for the current row (so that the child nodes above the selected node don’t get selected).

 [[TargetItem.index < Item.index && TargetItem.Path.length < Item.Path.length]]

This should get you part of the way there. I’ve attached an edited version of your file with the changes above. The checkboxes seem to work as expected when interacting with the top branch, though the “HMI” and “IP Address” boxes can be a little wonky. Hopefully that helps to give you ideas!

TreeWithCheckboxes Edit.rp (106.2 KB)

Repeater made tree node right click interaction
#8

It does - thanks for your help!

closed #9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.