How can i expand the node height on click in gojs

GoJS
1

Hi Guys ,

I am learning gojs and i am finding confused in one of the functionality,
I have a node which is having many data inside it, its a panel with shape rounded rectangle and listing data inside it , its having length 200 and there is an button called load more , on clicking load more , the height of the node should increase from 200 to 500 with button to collapse instead of load more.
I just made a sample mock for better understanding

Screenshot 2022-06-10 at 8.07.40 PM
Screenshot 2022-06-10 at 8.07.40 PM1892×1732 149 KB

Please help me with any suggestion or help , much appreciated

Thanks

2

It seems like you could use something similar to a PanelExpanderButton.

You can see the definition of that button in Buttons.js.

You could create a similar button that takes an array of names instead of a single name, and then toggle the visibility of all those elements in the click function.

3

am not sure whether you understand my question correctly
Here is it i have a node with height 200 , hence it will be showing header+5 items (Actually i have 10 items in my list) but due to height restriction am only able to show 5 items with load more button , again when i click on load more button , height should increase from 200 to 500 and now it have enough height to show the all 10 items , sorry if i make any confusion , also the load more button should change to collapse

4

Did you try the PanelExpanderButton link I sent? The PanelExpanderButton causes the height of the node to change as needed. That’s what I expect you want.

Really, you will just change the visibility of various elements in your node, and the height will adjust itself accordingly.

5

Am not sure , i was just checking to have a click function to the load more button and on click of that button I will be sending the node details and then increase the height of the selected node using desiredSize: new go.Size(500, 500)
Not sure , but this is what i was looking for
also i need to change the button label -toggle between load more and collpse
Am sorry if am wrong and please correct me

6

To change the button label, just change the button’s text in its click function.

Do you have a current node template that you’ve tried? Item arrays may be useful to you.

I think it makes more sense to include all necessary elements in the template and show/hide them as needed rather than dynamically trying to add/remove elements. I still don’t think you need to do anything with the height, just don’t set a desired height in your node template.

7 
$(
      go.Node,
      'Auto',
 $(go.Shape, { fill: 'white', name: 'SHAPE', maxSize: new go.Size(100, 100) }),
$(
        go.Panel,
        'Vertical',
//description data
),
$(
          go.Panel,
          'Table',
    new go.Binding('itemArray', 'mylist'),
{
            itemTemplate: $(
              go.Panel,
              'TableRow',
             $(
                go.TextBlock,
 new go.Binding('text', 'name')
              ),
 $(
                go.TextBlock,
               new go.Binding('text', 'grade')
              ),
)}
),
)

Say on initial load , it (node ) have height only 100 , so only 1 item in table only visible, even thats not sure, depends on description length , so at that case we need show load more button , , so how i will place load more button ( it more like position absolute and z-index , since it need to be on top layer and at the center bottom of node) and when you click on that node, height of the node increases from 100->500 to accomodate some more items and if all items are done , load more button should change to collapse on center bottom of node (same like position absolute and z-index and when you click on it, it should change back to height 100 with load more buttom .

8

Here’s a stand-alone sample that might be doing what you want:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout: $(go.GridLayout),
      "undoManager.isEnabled": true
    });

const SmallHeight = 60;
const BigHeight = 300;
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" }),
    $(go.Panel,
      { name: "OUTER", margin: 4, alignment: go.Spot.Top, height: SmallHeight },
      new go.Binding("height").makeTwoWay(),
      $(go.Panel, "Vertical",
        { name: "LIST" },
        new go.Binding("itemArray", "items"))
    ),
    $("Button",
      {
        margin: 4,
        alignment: go.Spot.Bottom,
        click: (e, button) => {
          e.diagram.commit(d => {
            const list = button.part.findObject("OUTER");
            list.height = (list.height > SmallHeight) ? SmallHeight : BigHeight;
          });
        }
      },
      $(go.TextBlock, "More", { name: "LABEL"},
        new go.Binding("text", "height", h => (h > SmallHeight) ? "Less" : "More")),
      new go.Binding("visible", "", panel => {
        panel.part.ensureBounds();  // this is a hack to make sure it has its expected height at binding time
        return panel.naturalBounds.height > SmallHeight;
      }).ofObject("LIST")
    )
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", items: ["abc"] },
  { key: 2, text: "Beta", items: ["abc", "def", "uvw", "xyz"] },
  { key: 3, text: "Gamma", items: ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu", "vwx", "yz"] },
]);
  </script>
</body>
</html>