Bands are currently running dynamically in the Banded Tree Layout.When there is no data on the nodes in the band, the band is completely invisible.
Q 1 : How can I make the header part always visible even if the related band is empty? Q 2: how do i change the background colors of the headers individually?
myDiagram.nodeTemplateMap.add("VerticalBands",
$(go.Part, "Position",
{
isLayoutPositioned: false, // but still in document bounds
locationSpot: new go.Spot(0, 0, 0, 30), // account for header height
layerName: "Background",
pickable: false,
selectable: false,
itemTemplate:
$(go.Panel, "Vertical",
new go.Binding("opacity", "visible", function (v) { return v ? 1 : 0; }),
new go.Binding("position", "bounds", function (b) { return b.position; }),
$(go.TextBlock,
{
verticalAlignment: go.Spot.Center,
textAlign: "center",
background: headerColor,
wrap: go.TextBlock.None,
font: "12pt 'Open Sans', Arial, sans-serif",
stroke: "transparent",
height: 30,
},
new go.Binding("text"),
new go.Binding("width", "bounds", function (r) { return r.width; })),
// for rectangular bands:
$(go.Shape,
{ stroke: null, strokeWidth: 0 },
new go.Binding("desiredSize", "bounds", function (r) { return r.size; }),
new go.Binding("fill", "itemIndex", function (i) { return i % 2 == 0 ? "#ececec" : "whitesmoke" ; }).ofObject()),
)
},
new go.Binding("itemArray")
));
myDiagram.model = new go.TreeModel(nodearray);
}
// update the background object holding the visual "bands"
var bands = this.diagram.findPartForKey("_BANDS");
if (bands) {
var model = this.diagram.model;
bands.location = this.arrangementOrigin.copy().add(offset);
// make each band visible or not, depending on whether there is a layer for it
for (var it = bands.elements; it.next();) {
var idx = it.key;
var elt = it.value; // the item panel representing a band
elt.visible = idx < layerRects.length;
}
// set the bounds of each band via data binding of the "bounds" property
var arr = bands.data.itemArray;
for (var i = 0; i < layerRects.length; i++) {
var itemdata = arr[i];
if (itemdata) {
model.setDataProperty(itemdata, "bounds", layerRects[i]);
}
}
}