Band - Adjust the margin

GoJS
#1

I am creating a prototype application and wanting to add bands to a vertical TreeLayout. I’ve got the bands where I’d like them but have been unable to get two things to where I’d like them. I am following the Swimbands example.

  1. I see how the band width is bound to the width of the diagram, but I’d like the width to be bound to the comntaining div. is this possible?
    new go.Binding("width", "bounds", function(r) { return r.width + 100; })
  2. How can I increase the padding between the band text and the nodes so that they don’t overlap?
    
    screenshot.png1071×508 27.2 KB

Thanks!

#2

No, one really cannot use data binding with the width of the DIV as the source. But there are several possibilities for achieving that functionality.

If your app is organized in the same manner as the Layer Bands sample, http://gojs.net/latest/samples/swimBands.html, then you could have the LayeredTreeLayout adjust the width of the Shapes in the “_BANDS” part based on the Diagram.viewportBounds. Then you just need to also set Layout.isViewportSized to true on the LayeredTreeLayout, so that the layout is re-performed on each resizing of the viewport. That will cause your code to update the “_BANDS” part as the user zooms out or in.

Note that the “_BANDS” part of that sample accounts for the size of the headers by setting the Part.locationSpot. The sample sets it to a constant size/offset, but you could adjust that based on how large your headers are.

#3

That’s exactly what I was looking for. Thank you!