Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

233
Visualizações
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]);
      }
    }
  }
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda