I have one go js table when it is loading it is loading from top right to bottom left, i want it to load from top left to bottom right.
I don’t understand what you mean by a direction for loading. Are you talking about how the nodes are arranged, depending on their order in the model?
Do you have two small screenshots showing what you have now and what you want instead, along with the data and the layout that you are using?
so in this when this diagram loads, the rows of the table goes from top right direction to bottom left.
I want it to load the nodes from top left to bottom right.
I am using go js table panel.
Is what your screenshot is showing a single Node?
I do not understand what you mean by “top left to bottom right”. The items in your screenshot seem to be going downward. Could you please show what you want instead?
yes, it’s a single node of panel type table…
What i want is when diagram loads there is a animation and all the products are loaded.
I want that animation to go from left to right.
this screenshot is taken while the diagram loads and you can see the products are going from top right to bottom.
I want it to load from left.
Oh, you want to change the default initial animation. Please read: GoJS Animation -- Northwoods Software
Does this give you enough information to be able to implement the initial animation that you want?
Can you give a sample for the node to load from left to right animation, and write the code for the animation in the node only.
Instead of using this.diagram!.animationManager.initialAnimationStyle = go.AnimationManager.Default;
this thing is not working.
Note that the initial animation is a layout animation where node locations are animated, not elements of panels.
how can we set the animation for the elements of panels? any sample
It depends on the type of panel. Can you share the node template with us and some dummy data? We might be able to come up with something.
this is my node template
this.nodeTemplate = $(go.Node, 'Vertical', { selectionAdorned: false },
$(go.Panel, 'Table', { width: productTableWidth },
$(go.Panel, 'Horizontal', {
row: 1, column: 0, width: productTableWidth,
mouseEnter: (e: any, obj: any) => {
obj.background = this.rowHoverColor;
},
mouseLeave: (e: any, obj: any) => {
obj.background = '#FFFFFF';
}
},
// Part No. (SKU)
$(go.Panel, 'Auto', { alignment: go.Spot.Left },
$(go.Shape, 'Rectangle', { stroke: '#DDDDDD', fill: 'white', name: 'SHAPE', width: 42, height: 42 }),
$(go.Picture, { name: 'Picture', desiredSize: new go.Size(40, 40) },
new go.Binding('source', 'imageThumbnail')
)
),
$(go.Shape, 'Rectangle', { width: 5, height: 42, fill: '#ffffff', stroke: 'transparent' }),
$(go.Panel, 'Vertical',
$(go.TextBlock, {
font: 'bold 1.1rem verdana', stroke: '#0A599C', width: productTableWidth,
maxLines: 1, overflow: go.TextBlock.OverflowEllipsis
},
new go.Binding('text', 'sku')),
$(go.TextBlock, { width: productTableWidth, font: '1rem verdana', stroke: '#000000' },
new go.Binding('text', 'packageQuantity', quantity => { return (quantity !== undefined) ? `Pkg Qty:${quantity}` : ''; }),
)
)
),
$(go.Shape, 'MinusLine', {
row: 2, column: 0, width: productTableWidth, height: 0.5,
stroke: '#E0E0E0', margin: new go.Margin(5, 0, 5, 0)
})
)
);
Wait, are these Nodes in a group? Can you share the group template?
Something still seems off if they are “loading from top right to bottom left”. Is this happening on group expansion, and not load?
Yes, it’s happening because of group expansion.
We don’t support customizing that built-in animation. However, if you don’t like the behavior, but want to keep other GoJS animations, you can turn off just that animation:
myDiagram.animationManager.canStart = function(reason) {
if (reason === "Expand SubGraph") return false;
return true;
}