Change default orientation - Organizational Chart

[Milad Dwaihi]

Hello, where and how can I change the default orientation of an Organizational Chart from TopToBottom to be by default RightToLeft ?

Any help?

[Ramya Thirugnanam]

Hi Milad, 

 

Thanks for contacting Syncfusion support. 

 

We have a support to customize the orientation of the layout using “orientation” property of the layout. 

 

Please refer to our demo sample and help documentation link to get more details and code example about layout customization. 

 

Link: https://help.syncfusion.com/js/diagram/automatic-layout#layout-orientation 

 

Demo sample link: https://js.syncfusion.com/demos/web/#!/bootstrap/diagram/automaticlayout/organizationalchart 

 

 

Regards, 

Ramya T 

[Milad Dwaihi]

Thanks for your reply, I checked the links. I tried to change it but it didn't works, where should I add this line in the index.js file

orientation: orientation.RightToLeft,

[Ramya Thirugnanam]

Hi Milad, 

 

We have created a simple sample to represent the layout and its properties. Please find the online sample from the below link. 

 

Link: https://jsplayground.syncfusion.com/njwm5un4 

 

Screenshot from the above sample: (where to set orientation). 

 

 

Regards, 

Ramya T 

[Milad Dwaihi]

Okay thank you for your reply, how can I have connectors without arrows? I mean remove arrows, the same as Organization Chart model

[Ramya Thirugnanam]

Hi Milad, 

 

Please set shape of the targetDecorator as none to remove/hide the targetDecorator of the connector. We have modified the sample to achieve this. Please refer to the sample from the below link. 

 

 

Sample Link: https://jsplayground.syncfusion.com/vlgmgl51 

 

 

 

 

For more details about decorator of the connector, please refer to our help documentation link as below. 

 

Help documentation link: https://help.syncfusion.com/js/diagram/connector#decorator 

 

 

Regards, 

Ramya T 

[Milad Dwaihi]

Thank you Ramya.

Last request. In the sample from the link you sent, can I download all the sample files (html + css + js) and not only the HTML or PDF file?

[Ramya Thirugnanam]

Hi Milad,  

 

We assume that your requirement is to get the diagram dependent css and theme files. If so, please refer to the below documentation to get the scripts as below. 

 

CSG Link: https://help.syncfusion.com/js/custom-script-generator 

 

CDN link: https://help.syncfusion.com/js/cdn 

 

Could please provides us clear description of your requirement if the above solution does not help to achieve your requirement. This will help us to serve you better. 

 

 

Regards, 

Ramya T 

[Milad Dwaihi]

Hello, thanks for your help, I have 2 requests:

1- how can I add to my Organizational Chart based on this sample https://jsplayground.syncfusion.com/njwm5un4  (note that mine it's too large) an expandable option?

2- is there any way to use hand tool (same as PDF) instead of using always the horizontal and vertical scroll function?

Thank you so much!

[Aravind Ravi]

Hi Milad,   

   

We have created a sample for your requirements as a web application. Please find the sample below   

   

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Organizational_Chart-EJ1895239359    

   

The diagram control has the following list of external JavaScript dependencies 

   

Jquery- 1.10.1 and later versions   

   

Jsrender – to render the templates   

   

Diagram has internal dependencies (css and script files) which is mentioned in the following table.   

   

<link rel="stylesheet" rel='nofollow' href="//cdn.syncfusion.com/16.4.0.42/js/web/flat-azure/ej.web.all.min.css" />   

<script src="//cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js"> </script>   

   

Once you have referred the dependencies file you can render the diagram.   

   

   

Please find the response for queries below   

   

How can I add to my Organizational Chart based on this sample https://jsplayground.syncfusion.com/njwm5un4  (note that mine it's too large) an expandable option?

In this sample we have used our data instead of that you may define your own data. After defining the data, in dataSourceSettings set the id, parent and map the datasource.        $("#diagram").ejDiagram(            {dataSourceSettings: { id: "Name", parent: "Category", dataSource: data },    });        In node default settings please set expand and collapse icon for node. Find the below code example for how to set expand and collapse icon        $("#diagram").ejDiagram(    defaultSettings: {                    node: {                        width: 100, height: 40,                        expandIcon:{ shape:"minus", width:10, height:10 },                         collapseIcon:{ shape:"plus", width:10, height:10 }                    },    }    });

Is there any way to use hand tool (same as PDF) instead of using always the horizontal and vertical scroll function?

Pan tool allows you to pan the diagram instead of always using the horizontal and vertical scroll function.  To enable pan tool set ZoomPan in the diagram tool. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the Diagram. Please find below code example for how to set ZoomPan and SingleSelect in diagram        $("#diagram").ejDiagram(    tool: ej.datavisualization.Diagram.Tool.SingleSelect | ej.datavisualization.Diagram.Tool.ZoomPan ,    });

   

For more details about diagram dependency files and organizational chart please find the below UG documentation link   

   

UG Link: https://help.syncfusion.com/js/diagram/getting-started     

   

UG Link – Organizational Chart: https://help.syncfusion.com/js/diagram/automatic-layout#organizational-chart  

   

Regards   

Aravind Ravi   

 

[Milad Dwaihi]

Thank you so much for your help! I will check the links and the codes.

Regards.

[Aravind Ravi]

Hi Milad,   

   

Thanks for your update.    

We will wait until hear from you.   

   

Regards,   

Aravind Ravi 

 

[Milad Dwaihi]

Hello Aravind,

Another questions :

1. How can I remove the select points while clicking the minus function (expandable) without right-clicking on blank area. (please check screenshots attached)
   
2. How can I download this js and css files so I can open my chart without being connected to internet, cause I tried to download the files from the links and disconnect the internet but the format was lost
           
   

Regards.

Attachment: screenshots_a49f4b95.rar

[Aravind Ravi]

Hi Milad, 

 

Please find the response for queries in below table 

 

How can I remove the select points while clicking the minus function (expandable) without right-clicking on blank area. (

To remove selector while clicking node , set selector constraints as none for the selected items. Please find below code snippet for how to set selector constraints as none    $("#diagram").ejDiagram(          {  selectedItems: { constraints: ej.datavisualization.Diagram.SelectorConstraints.None },  });    We have prepared a sample for your requirement. Please find the sample in below link    Sample: Organizational_Chart

How can I download this js and css files so I can open my chart without being connected to internet, cause I tried to download the files from the links and disconnect the internet but the format was lost

From custom script generator you can download the css and dependency files for the diagram control.    After download the dependency files you can refer it in the project locally.    Please refer to the below UG documentation link for more details about how to generate custom script    UG Link: https://help.syncfusion.com/js/custom-script-generator

 

 

Regards 

Aravind Ravi 

 

[Milad Dwaihi]

Thank you for your help.

Removing selector while clicking node works successfully now.

Also for the scripts.

 

To enable collapse by default (minimize the diagram)  while opening the it , I think I should use this line  " enableCollapseByDefault:true, " but where must I add it ?

Regards.

[Ramya Thirugnanam]

Hi Milad, 

 

Thanks for your update. 

 

Please set isExpanded as false for node in the node default settings to collapse the nodes by default while opening the diagram. Please refer to the code example as below. 

 

$("#diagram").ejDiagram( 

        { 

          defaultSettings: { 

                node: { 

                 expandIcon:{ shape:"minus", width:10, height:10 }, 

                  collapseIcon: { shape: "plus", width: 10, height: 10 }, 

                    isExpanded: false 

                }, 

  } 

 

}); 

 

 

We have created a sample for your requirement. Please find the sample in below link. 

 

Sample: Organizational-Chart 

 

For more details about expand and collapse in layout, please find the help documentation link as below. 

 

Link: https://help.syncfusion.com/js/diagram/automatic-layout#expand-and-collapse 

 

Regards, 

Ramya T 

[Milad Dwaihi]

It works. Thank you so much for your help Ramya.

Regards.

[Ramya Thirugnanam]

Hi Milad,  

 

  

Thanks for your update.  

 

 

Regards, 

Ramya T