Get Nodes that have param isGroup to create a Side Panel(Overview of Gantt)

GoJS
1

I am creating a Gantt Diagram where I will approach several projects. (Thanks in advance, to Walter for the answer to my last request)

My goal at this point is to create a side panel, where each of the projects is shown, and if the user clicks on one of them, they are redirected in the Grid to the Project, in order to make navigation in the Grid simpler. In order to know each project I have in my Grid, I am looking at the nodes that have the “isGroup” parameter.

imagem
imagem1918×888 95.3 KB

I’ve been reading your library about node and groups, namely the functions that I can call. I have seen the findNodeForKey, findNodesByExample, but I think that is not the answer to my problem …

My doubts here are:

  • How do I search for all Nodes that have the isGroup parameter.
  • How do I show it on my Lateral panel (here I think I will have to create a new div and bind the result of the nodes (isGroup = true).
  • Redirect the Grid to the position of the Project.

If you already have examples, I am grateful. I have been searching here in the forum, and in Documentation to see if there was something similiar that I could use to accomplish my goal. In fact, I found your example of Overview, but I think it is not the best solution for me.

2

To iterate over all groups,
myDiagram.nodes.each(function(node) { if (node instanceof go.Group) . . . })

To iterate over all top-level groups:
myDiagram.findTopLevelGroups().each(function(group) { . . . })

Yes, it would be easiest if you created a separate HTMLDivElement there and either put in your own HTML, or else put another Diagram there showing only the groups that you want to show, presumably with a different and simpler group template.

Did you want to show the particular group when the user selects the group in that new DIV? You’ll want to call myDiagram.commandHandler.scrollToPart(group).

3

Thanks again for your help Walter, I decided to create a diagram where I show the Group nodes to the user in order to make navigation easier.

function initOverview(){
 myDiagramOverview = 
  $(go.Diagram, "myOverviewDiv",
    {
      isReadOnly: true,
      "animationManager.isEnabled": false,
      initialContentAlignment: go.Spot.TopLeft,
      allowHorizontalScroll: false,
      allowVerticalScroll: false,
      allowZoom: false,
      padding: 0
    });


  myDiagramOverview.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    $(go.Panel, "Vertical",
      { margin: 3 },
      $("Button",
        { margin: 10,
          click: function(e, obj){
            var node = obj.part;
            var data = node.data;
            myDiagram.commandHandler.scrollToPart(node);
            }
          },
        $(go.TextBlock, new go.Binding("text", "ProjectKey"),{
            editable: false,
            margin:5,
            font: "bold 10px sans-serif",
            opacity: 0.75,
        })),
    )
  );


    
  var OverviewKeys = [];
  // Adicionar botões para cada key isGroup Existente
  myDiagram.nodes.each(function(node) { 
    if (node instanceof go.Group){
      OverviewKeys.push({Key:node.key,ProjectKey:node.key})
    }
  });
  myDiagramOverview.model = new go.GraphLinksModel(OverviewKeys);
}

Now, is there anyway that the myDiagram.commandHandler.scrollToPart(group) can show the group in the center of my grid? Because it’s showing on the right side of the grid, giving an undesirable effect to the user.

Right of the Grid

imagem
imagem1917×905 98.1 KB

Can it be Center?

imagem
imagem1920×905 99.6 KB

4

Call Diagram.centerRect instead, using the Group.actualBounds.

You’ll want to specify a layout in your overview. Maybe:

  layout: $(go.GridLayout, { wrappingColumn: 1 })

And don’t you want to allow vertical scrolling if there are enough groups in the view?

5

Yes, I have already changed the vertical scroll to true, because if they are enough group view I need to show all of them. Thanks for pointing that out.

Regarding alignment, both answers work correctly. The problem was in the way I was doing it. I was using the button properties(causing a misplacement in the Gantt Grid), when I should be using the group properties.

function initOverview(){
 myDiagramOverview = 
  $(go.Diagram, "myOverviewDiv",
    {
      isReadOnly: true,
      "animationManager.isEnabled": false,
      initialContentAlignment: go.Spot.TopLeft,
      allowHorizontalScroll: false,
      allowVerticalScroll: true,
      allowZoom: false,
      padding: 0
    });


  myDiagramOverview.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    $(go.Panel, "Vertical",
      { margin: 5 },
      $("Button",
        { margin: 10,
          click: function(e, obj){
            var nodeOverview = obj.part;
            var dataOverview = nodeOverview.data;
            myDiagram.nodes.each(function(node) { 
            if (node instanceof go.Group){
                if(node.key == nodeOverview.key){
                   myDiagram.centerRect(node.actualBounds);
                }
              }
            });
          }
        },
        $(go.TextBlock, new go.Binding("text", "ProjectKey"),{
            editable: false,
            margin:5,
            font: "bold 10px sans-serif",
            opacity: 0.75,
        })),
    )
  );

  myDiagramOverview.layout = $(go.GridLayout, { wrappingColumn: 1 });


    
  var OverviewKeys = [];
  myDiagram.nodes.each(function(node) { 
    if (node instanceof go.Group){
      OverviewKeys.push({key:node.key,ProjectKey:node.key})
    }
  });
  myDiagramOverview.model = new go.GraphLinksModel(OverviewKeys);
  console.log(OverviewKeys)
}

Thanks for the help, and your time.