I would like to create gantt chart example with react diagram(Gantt chart) I have created two diagrams but I didnt understand how can I pass mytask diagram reference to gantt layout subclass In your gantt chart you have created const myTasks but my scope is different when I created two different react diagram is there way to pass myTasks ref from $(GanttLayout,…)
We’re looking into the best way to accomplish this.
I think one way you could do this is to add a property to the GanttLayout which is a go.Diagram.
Then you would set that property in a componentDidMount/useEffect, after both refs are valid. You can get the Diagram from a ref by calling this.myTasksRef.current?.getDiagram();.
Sorry Where can i add that property?
instead of doing class I tried to move doLayout(coll) method to inside initDiagram() but doest really work Is there a way to do?
Add it to the GanttLayout class.
class GanttLayout extends go.Layout {
constructor() {
super();
this.cellHeight = GridCellHeight;
this.myTasks = null;
}
...
// DiagramWrapper
public componentDidMount() {
const myTasks = this.myTasksRef.current?.getDiagram();
const myGantt = this.myGanttRef.current?.getDiagram();
if (myTasks instanceof go.Diagram && myGantt instanceof go.Diagram) {
myGantt.layout.myTasks = myTasks;
myGantt.layoutDiagram(true);
}
}
oh okey thank you so much Ill try this
Here’s a working sample: gojs-react-Gantt - CodeSandbox
Thank you so much Actually I have another problem I would like convert tree layout to table layout on the left side and hide links I convert table layout but links are visible what should i do hide links I want make table look like second picture
How can i hide the links and give table to full width
To hide the links you can change the link template to simply $(go.Link).
Is each of those rows coming from one node data object? If so, you may not want a TableLayout, but instead a GridLayout with wrappingColumn set to 1.
Yes It will come from nodedata but how would set header gridlayout (id cob index) each row has corresponding byte value this will be another challenge Do you have some sample i can make it work thank you
Here’s an example of a GridLayout that maintains the sizes of each node’s columns to be the same and fills the viewport.
Thank you so much Actually I do have another problem should
You’ll need to set it up like the Gantt sample I showed earlier. Set the Diagram.padding, Diagram.initialPosition, ViewportBoundsChanged listeners, etc.
Yes I have done that but still have alignment issue, other problem when I do $(go.Link). I do have
“GraphLinksModel.linkKeyProperty must not be an empty string for .mergeLinkDataArray() to succeed.”
should I pass empty array?
That means you have not set the linkKeyProperty in your GraphLinksModel definition. You’ll need to take a closer look at the example I sent earlier and see why yours is different.
A post was split to a new topic: How to know where a node was dropped?
