Add a table below a shape

GoJS
1

Dear Friends,

Greetings! I want to create a table below a rectangle. Table should not visible initially, only rectangle can show initially with a name. When I click on the rectangle it should open a popup link, there user has to enter details, based on the details in that popup (when they save or close the popup ) table filled with text and table has to visible below the rectangle.

I have created rectangle with text using below code:

diagram.nodeTemplateMap.add("RightRectangle",
  $$(go.Node, "Spot", nodeStyle(),
  {
    selectionAdornmentTemplate: // adornment when a group is selected
              $$(go.Adornment, "Auto",
                $$(go.Placeholder),
                $$("Button",
                {
                  alignment: go.Spot.LeftCenter,
                  click: addRightSubNodeAndLink  // this function is defined below
                },
                $$(go.Shape, "PlusLine", {name:"left", width: 6, height: 6 })
              )
              )
  },
  new go.Binding("movable","movable"),
  new go.Binding("location","loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $$(go.Panel, "Auto",
      $$(go.Shape, "Rectangle",
        { minSize: new go.Size(200, 90),
          fill:new $$(go.Brush, "Linear", { 0.0: "White", 1.0: "red" }),          
          stroke: null 
        },
        new go.Binding("fill")),        
      $$(go.TextBlock, "Rectangle",
        { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "#000000", editable: false, width:150,height:60, background:"white", textAlign:"center", verticalAlignment: go.Spot.Center},
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the top, all output only:   
    makePort("L", go.Spot.Left, false, false),   
    {
      click: function (e, obj) {
        selectedNode(e, obj)
      }
    },
    { doubleClick: function (e, obj) { showMessage("Clicked on " + obj.resizable); obj.resizable = false; } }
  ));
//----------------
diagram.model.addNodeData({key:"L_"+leftMainNodeInc,category: "LeftRectangle", text: "Cause"+leftMainNodeInc,loc:go.Point.stringify(p),movable:false,subObj:0})
//--------------------------

Please help me to draw table under this and open a popup window to pass message and get message from there and fill&show the table.

iam new to this. Pls help me to get this.

Thanks in advance,
Syed Abdul Rahim

2

In your doubleClick (or click) event handler you can execute code to show the HTML containing the details that the user can fill in. How you do that depends on whatever framework you are using. If you are using jQuery, you already know about jQueryUI Dialogs.

The only thing that you need from GoJS is the reference to the model data to which the Node is bound. Please look at the diagrams at GoJS Data Binding -- Northwoods Software and GoJS Building GraphObjects -- Northwoods Software. So in your click event handler you can get to the data object via obj.part.data.

Remember when you want to modify that data object, as the user fills in various fields, is to start a transaction, call Model methods to change the data, and then commit the transaction. GoJS Using Models -- Northwoods Software

If you want to put off developing custom HTML in your app for showing and editing those node (or link) details, you can use the GoJS Data Inspector. GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software That will handle many common simple data requirements.