Row index issue with multiple item template

GoJS
1

I have two tables based out on two different itemTemplates, When I get try to row index of second table it gives always 0 instead of actual index. Can you please throw light what is the best way to find out index when we have more than one tables

 $("ScrollingTable",
                {
                  desiredSize: new go.Size(NaN, 75),  // fixed width
                  stretch: go.GraphObject.Fill,       // but stretches vertically
                  margin: new go.Margin(0, 0, 0, 5), name: 'CommentsPanel'
                },
                new go.Binding("TABLE.itemArray", "comments"),
                {
                  defaultAlignment: go.Spot.Left,
                  "TABLE.itemTemplate":
                    $(go.Panel, "TableRow",
                      {
.
.
.

 $(go.Panel, "Horizontal",
                          { width: 329 },
                          $(go.TextBlock,
                            {                          
                              mouseEnter: function (e, obj) {                            
                                var itempanel = obj.panel;
                                console.log(itempanel);
                                console.log(itempanel.row);
..
..
2

I just tried modifying an old sample that had two “Table” Panels, and I added a mouseEnter event handler on the TextBlock in each “TableRow” Panel:

  function init() {
    var $ = go.GraphObject.make;

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

    function collapsedArrow(shape) {
      if (shape instanceof go.Shape) {
        shape.figure = "TriangleRight";
        shape.fill = "gray";
      }
    }

    function expandedArrow(shape) {
      if (shape instanceof go.Shape) {
        shape.figure = "TriangleLeft";
        shape.fill = "black";
      }
    }

    var itemTemplate =
      $(go.Panel, "TableRow",
        $(go.TextBlock, { column: 0, minSize: new go.Size(50, NaN), maxSize: new go.Size(100, NaN) },
          { mouseEnter: function(e, tb) { console.log("item " + tb.panel.row) } },
          new go.Binding("text", "desc")),
        $(go.Shape, "TriangleRight",
          {
            name: "ARROW", column: 1,
            width: 8, height: 8,
            strokeWidth: 0, fill: "gray",
            click: function(e, shape) {
              e.handled = true;
              e.diagram.startTransaction();
              var details = shape.part.findObject("DETAILS");
              if (shape.figure === "TriangleRight") {
                // make sure all other Shapes are "TriangleRight" and gray
                var items = shape.part.findObject("ITEMS");
                if (items) items.elements.each(function(p) { collapsedArrow(p.findObject("ARROW")); });
                // indicate this item is expanded, so show the details
                expandedArrow(shape);
                details.data = shape.panel.data;
                details.visible = true;
              } else {
                collapsedArrow(shape);
                details.visible = false;
              }
              e.diagram.commitTransaction("details");
            }
          })
      );

    var detailTemplate =
      $(go.Panel, "TableRow",
        $(go.TextBlock, { column: 0, minSize: new go.Size(50, NaN), maxSize: new go.Size(100, NaN) },
          { mouseEnter: function(e, tb) { console.log("detail " + tb.panel.row) } },
          new go.Binding("text", "text")),
        $(go.TextBlock, { column: 1 },
          new go.Binding("text", "id"))
      );

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" }),
        $(go.Panel, "Table", { margin: 2, defaultAlignment: go.Spot.Top },
          $(go.Panel, "Table", { column: 0 },
            new go.Binding("itemArray", "states"),
            { name: "ITEMS", itemTemplate: itemTemplate },
            $(go.Panel, "TableRow", { row: 0, isPanelMain: true },
              $(go.TextBlock, { column: 0, columnSpan: 2 },
                new go.Binding("text", "key"))
            )
          ),
          $(go.RowColumnDefinition, { column: 1, width: 5 }),
          $(go.RowColumnDefinition, { column: 2, separatorStroke: "black", separatorPadding: 5 }),
          $(go.Panel, "Table", { column: 2 },
            new go.Binding("itemArray", "details"),
            { name: "DETAILS", itemTemplate: detailTemplate, visible: false },
            $(go.Panel, "TableRow", { row: 0, isPanelMain: true },
              $(go.TextBlock, { column: 0, columnSpan: 2 },
                new go.Binding("text", "desc"))
            )
          )
        )
      );

    myDiagram.model = new go.GraphLinksModel([
      {
        key: "Alpha", states: [
          {
            desc: "A1", details: [
              { text: "info1a", id: "W" },
              { text: "info1b", id: "X" }
            ]
          },
          {
            desc: "A2", details: [
              { text: "info2a", id: "W" },
              { text: "info2b", id: "X" },
              { text: "info2c", id: "Y" },
              { text: "info2d", id: "Z" }
            ]
          },
          { desc: "A3", details: [] },
        ]
      },
      {
        key: "Beta", states: [
          {
            desc: "U", details: [
              { text: "info1a", id: "U1" },
              { text: "info1b", id: "U2" }
            ]
          }
        ]
      }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
  }

Everything seems to work as expected.

image

3

sorry didn’t post you full code at initial post, I just found issue which is somewhere else.
I have multiple panels inside itemTemplate which is causing the issue, If I just keep one panel it works fine, am I pulling wrong panel? Please help

 new go.Binding("TABLE.itemArray", "comments"),
                {
                  name: 'CommentsPanel',
                  defaultAlignment: go.Spot.Left,
                  "TABLE.itemTemplate":
                    $(go.Panel, "TableRow",
                      {
                        defaultAlignment: go.Spot.Left,
                        doubleClick: function (e, node) {
                        }
                      },
                      $(go.Panel, "Vertical",
                        {
                          defaultAlignment: go.Spot.Left,
                        },

                        $(go.Panel, "Horizontal",
                          {
                            defaultAlignment: go.Spot.Left,
                          },
                          $(go.Panel, "Spot",
                            {
                              isClipping: true,
                              // scale: 1,
                              alignment: go.Spot.Left,
                              margin: new go.Margin(0, 0, 0, 0), // (top,right,bottom,left)
                            },
                            $(go.Shape, "Circle", {
                              width: 16, strokeWidth: 0,
                            }),
                            $(go.Picture,
                              {
                                height: 16, width: 16,
                                alignment: go.Spot.Center,
                              },

                              new go.Binding('source', 'author', function (a) {
                                var commentsAuthor = '';
                                for (var key in a.avatarUrls) {
                                  if (a.avatarUrls.hasOwnProperty(key) && key == '16x16') {
                                    commentsAuthor = a.avatarUrls[key];
                                  }
                                }
                                return commentsAuthor;
                              })
                            )
                          ),

                          $(go.TextBlock, textStyle(true, 8), new go.Binding("text", "author", function (a) { return a.name + ' added a comment' + ' - ' + moment(a.updated).format("LL"); }),
                            {
                              margin: new go.Margin(0, 0, 0, 2)
                            }
                          )
                        ),

                        $(go.Panel, "Horizontal",
                          {
                            width: 329,
                          },
                          $(go.TextBlock,
                            {
                              maxLines: 2,
                              margin: new go.Margin(0, 20, 0, 20),
                              width: 300,
                              overflow: go.TextBlock.OverflowEllipsis /* the default value */,
                              mouseEnter: function (e, obj) {
                            
                                console.log(obj.part.data);

                                var itempanel = obj.part.findObject('CommentsPanel');
                                // console.log(itempanel);
                                console.log(itempanel.row);
4

Is the code that you just posted the inner Table Panel? Did you want to get the outer row, not an inner row? You cannot use Panel.findObject on the Node to find any GraphObject that was copied from an itemTemplate. Each item Panel will have copies of the same item template, so for any named object in the template, there will be that many objects with the same name.