Auto arrange swimlane children's margin

Question

Hi, How can I arrange swimlane child nodes automatically ? I don't have Left Top margin because of that all children overlap on one another. Please have a look on below image for more clarityWhen I drag "Acceptance Tests" child.My json for children is as follow:"children": [{
		id: 'node1',
		annotations: [{
			content: 'Acceptanee',
			style: {
				fontSize: 11
			}
		}],
		height: 40,
		width: 100
	},
	{
		id: 'node2',
		shape: {
			type: 'Flow',
			shape: 'Decision'
		},
		annotations: [{
			content: 'Acceptanee Test',
			style: {
				fontSize: 11
			}
		}],

		height: 60,
		width: 120,
		ports: port
	}
]I want equal margin between every child. Please let me know how to achieve it.Thanks

Aravind Ravi · Accepted Answer

Hi Ashish, 

By using the lane child’s margin, we can able to position the nodes inside lane without overlapping. For the child set the margin top, left. So that child gets rendered with the given margin. Please refer to the below code snippet  





lanes: [ 
                { 
                    id: 'stackCanvas1', 
                    height: 100, 
                    header: { 
                        annotation: { content: 'CUSTOMER' }, width: 50, 
                        style: { fontSize: 11 } 
                    }, 
                    // Set the childern of lane 
                      children: [ 
                        { 
                        id: 'node1', 
                        annotations: [ 
                            { 
                                content: 'Consumer learns 
 of product', 
                                style: { fontSize: 11 } 
                            } 
                        ], 
                        margin: { left: 60, top: 30 }, 
                        height: 40, width: 100, 
                    }, { 
                        id: 'node2', 
                        shape: { type: 'Flow', shape: 'Decision' }, 
                        annotations: [ 
                          { 
                            content: 'Does 
 Consumer want 
the product', 
                            style: { fontSize: 11 } 
                          } 
                        ], 
                        margin: { left: 200, top: 20 }, 
                        height: 60, width: 120, 
                      }, 
                    ], 
                }, 

            ], 

For more information about how to use child margin property, please refer to the below UG documentation link 

UG Link: https://ej2.syncfusion.com/vue/documentation/diagram/swim-lane/Regards 
Aravind Ravi

Ashish · Answer

Hi Aravind,

I already tried to set margin as you suggested and its working fine but I had to do it for every element. I want to set margin between element to element.

In your example you gave,

margin: { left: 60, top: 30 }, for first,

margin: { left: 200, top: 20 }, for second

This margin is absolute to border/ lane but is there anyway to make it relative to element ?

Regards

Gowtham Gunashekar · Answer

Hi Ashish,  
We have only option to position the child inside the lane using margin property of the child. We don’t have option to change the child’s position relative to element. As we suggest earlier, using the child node’s margin property we can position the children inside the lane anywhere. 
Regards,  
Gowtham