I already have diagram in this one container node and inside container node adding row(as creating Shapenode).
but now we have to do this functionality in another way as below mentioned,
Parent container node have one expand button, click on that expand button i want to add child container node and so on.....for multiple child.
For eg. in below diagram i have Parent node(container node) on click of expand button 2 child added 1)Child node 2)Child1 node both are container node.
again if i click on 1)Child node expand button i want to add another container node(Childs).

Can you please help on the same?

adding child in container but diagram area is not increasing.

while adding child in container or adding multiple container using how to increase diagram area automatically.
added
this.diagram.setAutoResize(AutoResize.AllDirections);
but still not working

and when i am doing collapse and expand node size(width) is changed how to avoid this?

i have applied above solution for adding and arrage child as per layout  but for the left ,right top and bottom margin is very large can we remove this margin or dynamically add margin ?

one more question regarding when we folded inside child how to manage the space and put child as one below postion insted of showing space inside.

And one more query how to hide expand /collapse button? if children's not present

i have one problem while collapse and expand when i am expanding node inside all node and after that i am collapsing inside node and after that main node collapsed and after that all collapsed node again i am expanding that time my other parent node link disconnected

The while (container) { arrange ... } loop from code above should take care of that, check if it executes as expected for your collapse case.

Don't call arrange on folded containers, or the layout will still resize them to fit their children -

function onContainerFolded(sender, e)
{
	arrangeContainers(e.getNode());
}

function onContainerUnfolded(sender, e)
{
	arrangeContainers(e.getNode());
}

function arrangeContainers(container)
{
	var verticalLayout = new mg.LayeredLayout();
	verticalLayout.multipleGraphsPlacement = mg.MultipleGraphsPlacement.Vertical;

	while (container)
	{
		if (!container.getFolded())
			container.arrange(verticalLayout);
		container = container.container;
	}
}

function arrangeRecursive(container)
{
	var childNodes = container.getChildren();
	for (var i = 0; i < childNodes.length; i++)
	{
		if (childNodes[i].children)
			arrangeRecursive(childNodes[i]);
	}
	var verticalLayout = new mg.LayeredLayout();
	verticalLayout.multipleGraphsPlacement = mg.MultipleGraphsPlacement.Vertical;
	container.arrange(verticalLayout);
}

function testCtrArrange(diagram)
{
	var l1 = diagram.factory.createContainerNode(20, 20, 60, 100);
	l1.setFoldable(true);

	for (var i = 0; i < 3; i++)
	{
		var l2 = diagram.factory.createContainerNode(20, 20, 60, 100);
		l2.setFoldable(true);
		l1.add(l2);

		for (var j = 0; j < 3; j++)
		{
			var l3 = diagram.factory.createContainerNode(20, 20, 60, 20);
			l3.setFoldable(true);
			l2.add(l3);
		}
	}

	arrangeRecursive(l1);
} 

Regards,
Slavcho

This shows child nodes in correct order in my test -

function onContainerUnfolded(diagram, e)
{
	var ctr = e.getNode();
	if (ctr.children.length == 0)
	{
		var r = ctr.getBounds();
		for (var i = 0; i < 310; i++)
		{
			var child = diagram.factory.createContainerNode(r.x, r.y, 50, 10);
			child.setText(String(i));
			ctr.add(child);
		}
		arrangeContainers(ctr);
		diagram.resizeToFitItems();
		return;
	}
	// ....
} 

You could get such unfinished graphics if you have disabled virtual-scroll mode and the diagram size reaches the max. supported canvas element size (that might depend on browser version, video memory available, etc). Virtual scroll mode is enabled by default in recent versions of the diagram. Otherwise check if there aren't some errors reported in browser's console.

Regards,
Slavcho
Mindfusion