How can i expand the node height on click in gojs

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

Please help me with any suggestion or help , much appreciated


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.

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

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.

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

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.

 $(go.Shape, { fill: 'white', name: 'SHAPE', maxSize: new go.Size(100, 100) }),
//description data
    new go.Binding('itemArray', 'mylist'),
            itemTemplate: $(
 new go.Binding('text', 'name')
               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 .

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

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

  <script src=""></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" }),
      { 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"))
        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;

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"] },