TreeGrid indent expansion component

[Hirn]

Good day everyone

I had a task to show details in the tree as shown in the picture

I did it this way

       noticesTree = new TreeGrid() {
            @Override
            protected Canvas getExpansionComponent(final ListGridRecord record) {
                Tree tree = noticesTree.getData();
                TreeNode parent = Tree.nodeForRecord(record);
                int level = 0;
                while((parent = tree.getParent(parent)) != null) {
                    level++;
                };
                int indent = JSOHelper.getAttributeAsInt(noticesTree.getConfig(), "indentSize");
                noticesTree.setProperty("embeddedComponentIndent",     noticesTree.getOpenerIconWidth() + level * indent);
                DetailViewer details = (DetailViewer) super.getExpansionComponent(record);
                details.setLabelAlign(Alignment.LEFT);
                details.setLabelSuffix("");
                return details;
            }
        };

is there no other way to achieve the same result?

[Isomorphic]

Your general approach is OK, but there is bizarre use of JSOHelper when there is a simple getIndentSize() API, Tree.getLevel() obviates the need to do your own iteration, and you could introduce left padding with many different approaches rather than using the undocumented and unsupported internal property embeddedComponentIndent.

We would guess that you ended up with these strange and overly complex approaches because you favored source code inspection and step-through debugging over simply reading the docs. We would recommend reading the docs more. Much more effective.

[Hirn]

Your general approach is OK, but there is bizarre use of JSOHelper when there is a simple getIndentSize() API, Tree.getLevel() obviates the need to do your own iteration,

thank you so much for the hint. I will continue to read more documentation

and you could introduce left padding with many different approaches rather than using the undocumented and unsupported internal property embeddedComponentIndent.

I've tried many ways to set different margins for different levels .

One of them was like this....

 details.getElement().getStyle().setMarginLeft(level * indent, Unit.PX);

but it didn 't work and I started looking in debag mode for why.
So I came across a variable embeddedComponentIndent

[Isomorphic]

Now you're trying to hack the SmartGWT generated DOM, which is again an invalid approach.

Among other simple ways to achieve this, you could just put your DetailViewer in a Canvas and set a left coordinate, or put it in a Layout with a LayoutSpacer in front of it to take up space.

[Hirn]

Among other simple ways to achieve this, you could just put your DetailViewer in a Canvas and set a left coordinate, or put it in a Layout with a LayoutSpacer in front of it to take up space.

Thank you of course for the advice, but I also tried this.
This led to the fact that the component's width is calculated incorrectly and is outside the scope of the tree.

                    int level = noticesTree.getData().getLevel(Tree.nodeForRecord(record));
                    int indent = noticesTree.getIndentSize();
                    int iconWidth =  noticesTree.getOpenerIconWidth();
                    details.setLabelAlign(Alignment.LEFT);
                    details.setLabelSuffix("");
                    Canvas cnv = new Canvas();
                    cnv.setWidth("100%");
                    details.setLeft(iconWidth + level * indent - details.getLeft());
                    cnv.addChild(details);
                    return cnv;

[Isomorphic]

You didn’t set a width for the DetailViewer at all, nor did you set overflow to hidden or auto to create clipping.