• Jobs
  • About Us
  • Jobs
    • Home
    • Jobs
    • Courses and challenges
  • Businesses
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

191
Views
Gojs making part of header always visible and changing background colors individually

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]);
      }
    }
  }
over 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Show me some job opportunities
There's an error!