How to change the color of links in the table panel when user click on the row

GoJS
1

I was creating a lineage which contains the table. I want to change the color of link when user click on the row of the table but i cant able to get link objects from the panel object

2

OK, I’ll assume that your Node has a Panel whose Panel.itemArray is data bound to some Array of objects, one per “field” or “column”.

I’ll also assume that each “field” is a “port” – i.e. that that Panel’s Panel.itemTemplate is a Panel whose GraphObject.portId is data bound to some unique identifier string within the node. Perhaps it is bound to the string that you are also showing in a TextBlock, if there cannot be any duplicates.

So you can establish a GraphObject.click event handler on that item (template) Panel:

{
  itemTemplate: $(go.Panel, ...,
      { click: highlightLinks },
      ...
      $(go.TextBlock, ...)
      ...
    )
}

Where highlightLinks you define in some manner depending on whether the link color is meant to be persistent or not.

I suspect that the most common answer to that question is “no” – you do not want to the link color to be saved in the model. Basically you just want to highlight those links, much as you can see when the user passes the mouse over parts in the Friend Wheel sample.

Furthermore I’ll assume that if the user clicks on a different “field”, perhaps even on a different node, that you want to restore the color of those links that are now unrelated to the newly clicked field/port.

So I think you’ll want to use the highlighting mechanism that is built into GoJS.

function highlightLinks(e, item) {  // assume ITEM is a port
  e.diagram.startTransaction("highlight links");
  e.diagram.clearHighlighteds();
  var node = item.part;
  node.findLinksConnected(item.portId).each(function(link) {
        link.isHighlighted = true;
    });
  e.diagram.commitTransaction("highlight links");
}

So how does one change the color of something when a Part becomes Part.isHighlighted? Read about Highlighting.

myDiagram.linkTemplate =
  $(go.Link, ...,
    $(go.Shape,
      new go.Binding("stroke", "isHighlighted",
                     function(h) { return h ? "red" : "black"; })
                   .ofObject()),  // of the Link itself, not of the Link.data
     . . .
  );

You might also want to clear all highlighting when nothing is selected. You can do that by implementing a DiagramEvent listener:

myDiagram =
  $(go.Diagram, ...,
    {
      "SelectionChanged": function(e) {
          if (e.diagram.selection.count === 0) e.diagram.clearHighlighteds();
        }
    }
  )
3

I was applied the tree layout for the diagram. when a link draw between the nodes the diagram is relay-outing .
I dont want to relayout when the links are drawn between the nodes

4

Normally when Nodes or Links are added or removed from a Diagram, the Diagram.layout (or maybe a Group.layout) is invalidated and soon another layout will be performed.

There are several ways of preventing the Layout(s) from being invalidated. Please read about layout invalidation at GoJS Layouts -- Northwoods Software.