Disable diagram horizontal scrolling

Question

Is there any possibility of disabling the diagram component horizontal scrolling and make the nodes "wrap" and rearrange downwards?

Aravind Ravi · Answer

Hi Mikel, 

In the diagram, we can able to add nodes dynamically within viewport width and make nodes wrap. By using the diagram scrollSettings’s viewportwidth property we can able to find the diagram width. When the added node is going beyond the viewport width means then we can check and change its Y position. So that node does not go beyond viewport width. Please refer to below code snippet 





let offsetX: number = 100; 
  let offsetY: number = 100; 
  
  public addNode() { 
    //Create a node object with size 
    let node: NodeModel = { height: 100, width: 100 };  
    //Check node offset lesser than diagram viewportwidth 
// here diagram is a reference of diagram 
    if (offsetX < diagram.scrollSettings.viewPortWidth) { 
      node.offsetX = offsetX; 
      node.offsetY = offsetY; 
      //Add a node at runtime 
      diagram.add(node); 
      offsetX = offsetX + 150; 
    } else { 
      offsetX = 100; 
      offsetY = offsetY + 150; 
      node.offsetX = offsetX; 
      node.offsetY = offsetY; 
      diagram.add(node); 
    } 
  } 

We have already prepared a KB to show how to wrap the node and rearrange in the diagram. Please find the KB in the below link 

KB: https://www.syncfusion.com/kb/11064/how-to-automatically-arrange-nodes-without-overlapping-in-angular-diagram 

Regards Aravind Ravi

Mikel Díaz de Arcaya · Answer

Hi, Aravind.We have tried the solution and It works, but now the problem is that when we call doLayout() method of the diagram, everything is reordered again and all the offsets that we setted up are moved. Is it possible to limit the horizontal arrangement of the items during the layout ordering?

Aravind Ravi · Answer

Hi Mikel, 

By default, in the diagram, if set layout for diagram and call doLayout means then nodes are get arranged based on the layout algorithm. We cannot able to limit the horizontal arrangement of the items during the layout ordering. If you want to avoid horizontal scrolling for the diagram means then do not set any layout for the diagram and do not call doLayout method. 

Regards 
Aravind Ravi