Add TableRow in the table

GoJS
1

Hi want to add table rowin my table this the code

 //add field  decision or question
            myDiagram.nodeTemplateMap.add("Decision",
                $(go.Node, "Auto",nodeStyle(),
                    $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
                    $(go.Panel, "Table",
                        // Set defaults for all rows and columns:
                        { defaultRowSeparatorStroke: "gray", defaultColumnSeparatorStroke: "gray" },
                        $(go.Panel, "TableRow", { row: 0 },
                            $(go.TextBlock, "Header 1",
                                { column: 1, font: "bold 10pt sans-serif", margin: 2 }),
                            $(go.TextBlock, "Header 2",
                                { column: 2, font: "bold 10pt sans-serif", margin: 2 })),
                        $(go.RowColumnDefinition,
                            { row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
                        $(go.RowColumnDefinition,
                            { column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
                        $(go.Panel, "TableRow", { row: 1 },
                            $(go.TextBlock, "One", { column: 0, stroke: "green", margin: 2 }),
                            $(go.TextBlock, "Male", { column: 1, margin: 2,editable: true }),
                           // $(go.TextBlock, "row 1 col 2", { column: 2, margin: 2 } )
                            $(go.Panel, "Vertical",
                                {column: 2, margin: 2},
                                $("Button",
                                    {
                                        margin: 2,
                                        click: showSecondInspector },
                                    $(go.TextBlock, "Set")
                                )

                            )
                        ),
                        $(go.Panel, "TableRow", { row: 2 },
                            $(go.TextBlock, "Two", { column: 0, stroke: "green", margin: 2 }),
                            $(go.TextBlock, "Female", { column: 1, margin: 2  , editable: true}),
                          //  $(go.TextBlock, "row 2 col 2", { column: 2, margin: 2 })
                            $(go.Panel, "Vertical",
                                {column: 2, margin: 2},
                                $("Button",
                                    {
                                        margin: 2,
                                        click: showSecondInspector },
                                    $(go.TextBlock, "Set")
                                )

                            )
                        ),
                        $(go.Panel, "TableRow", { row: 3 },
                            $(go.TextBlock, "Three", { column: 0, stroke: "green", margin: 2 ,}),
                            $(go.TextBlock, "Other", { column: 1, margin: 2 ,editable: true }),
                            //$(go.TextBlock, "row 3 col 2", { column: 2, margin: 2 })
                            $(go.Panel, "Vertical",
                                {column: 2, margin: 2},
                                $("Button",
                                    {
                                        margin: 2,
                                        click: showSecondInspector },
                                        $(go.TextBlock, "Set")
                                )

                            )
                        )
                    ),
                    new go.Binding("text", "text").makeTwoWay()
                ));

I want to create one button and if i click there i add dynamycally a table row .
Thanks

2

Just call Model.insertArrayItem.

Have you seen Add or Remove Columns or Dragging Fields Between Records ?

3

Hello , i seen this example but is different what i want to do .
did you see the code below

4

What is an example node’s data object that is in the model? Please show the data both before and after the row has been added.

5

myPalette =
$(go.Palette, “myPaletteDiv”, // must name or refer to the DIV HTML element
{
// Instead of the default animation, use a custom fade-down
“animationManager.initialAnimationStyle”: go.AnimationManager.None,
“InitialAnimationStarting”: animateFadeDown, // Instead, animate with this function

                    nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                    model: new go.GraphLinksModel([  // specify the contents of the Palette
                        { category: "Start", text: "Start" },
                        { category: "End",  text: "End" },
                        { category: "Html", text: "Html" },
                        { category: "Decision",key: "Decision",nodeDataArray:[{ key: "fields" ,name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" }]}
                    ])
                });

i tried that the data wre not dipslay in my palette

6

A node template is an instance of a Node that has the basic outline of everything you would expect each copy of the template to have. The individual Node instances in the Diagram will be customized by the node data’s property values via the Bindings that the template has. Please read GoJS Using Models -- Northwoods Software and GoJS Data Binding -- Northwoods Software for more explanation.

Your template only seems to have a single Binding in it, but even it won’t change the appearance of the Node because the Binding is not on a TextBlock. I think you want to read GoJS Item Arrays-- Northwoods Software.

I am emphasizing that you need to know what your data is and how it changes, so that you can customize your node template accordingly.