Do we have any way to focus on particular node ejs-diagram for complex hierarchical Tree layout for syncfusion.

Question

Hi,Initially we need to focus on particular node like node 116 , do we have built-in functionality to achieve this behavior?Attaching the folder structure.Attachment: focus_node_116_1b928583.zip

Vivisa Ganesan · Answer

Hi,The focus will be on the chosen elements. Do you trying to position the
diagram elements in center of viewport? Could you please share more details
like video on your requirement. Once we have your specific requirements, we'll
verify and provide you with further updates.Regards,Vivisa

Geeta · Answer

Hi,Yes, we want to focus the diagram particular selected node in center of viewport.

Vivisa Ganesan · Answer

Hi,We have created the sample as per your requirement. You
can bring the selected node into the center of the viewport with the
bringToCenter method. Please refer the below code-snippet and sampleCode-snippet:

public created(): void {
     this.diagram.select([this.diagram.nodes[11]])
      var bounds =  this.diagram.selectedItems.nodes[0].wrapper.bounds;
      this.diagram.bringToCenter(bounds);
    }

Regards,VivisaAttachment: bringto_viewport_4db021c0.zip

Geeta · Answer

Hi,Actually we don't want to show the node selection border for any of the nodes. So how we can remove the selection style of the nodes and still can focus on particular node to bring it in center of viewport.Attachment: selection_image_11a64932.zip

Geeta · Answer

Hi,Also, if we trying to focus on Node "Node19", it is always in bottom left corner which is not displayed in the center of the div containing the chart. So how can we achieve the same.Attachment: selection_image_29eeec1d.zip

Vivisa Ganesan · Answer

Hi,

Query

Solution

Actually we don't want to show the node
  selection border for any of the nodes. So how we can remove the selection
  style of the nodes and still can focus on particular node to bring it in
  center of viewport.

We've
  made some modifications to the sample, demonstrating how to bring the node to
  the center without explicitly selecting it. Please see the updated example
  below.

Also, if we trying to
  focus on Node "Node19", it is always in bottom left corner which is
  not displayed in the center of the div containing the chart. So how can we
  achieve the same.

To bring
  the node to the center, you need to set the `scrollLimit` as infinity in the
  `scrollSettings` property. We have modified the sample. Please refer to the
  code snippet and sample below.
   
  Code-snippet:

public
    scrollSettings:ScrollSettingsModel = { scrollLimit:"Infinity"}

Regards,VivisaAttachment: brintToCenter_78c516a5.zip