We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Change default orientation - Organizational Chart

Thread ID:

Created:

Updated:

Platform:

Replies:

142409 Feb 1,2019 09:36 AM UTC Feb 11,2019 08:54 AM UTC jQuery 17
loading
Tags: ejDiagram
Milad Dwaihi
Asked On February 1, 2019 09:36 AM UTC

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 [Syncfusion]
Replied On February 1, 2019 10:15 AM UTC

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. 
 
 
 
 
Regards, 
Ramya T 


Milad Dwaihi
Replied On February 1, 2019 11:07 AM UTC

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 [Syncfusion]
Replied On February 1, 2019 11:28 AM UTC

Hi Milad, 
 
We have created a simple sample to represent the layout and its properties. Please find the online sample from the below link. 
 
 
Screenshot from the above sample: (where to set orientation). 
 
 
Regards, 
Ramya T 


Milad Dwaihi
Replied On February 4, 2019 09:49 AM UTC

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 [Syncfusion]
Replied On February 4, 2019 10:38 AM UTC

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. 
 
 
 
 
 
 
For more details about decorator of the connector, please refer to our help documentation link as below. 
 
 
 
Regards, 
Ramya T 


Milad Dwaihi
Replied On February 4, 2019 10:44 AM UTC

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 [Syncfusion]
Replied On February 5, 2019 07:27 AM UTC

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. 
 
 
 
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
Replied On February 6, 2019 11:16 AM UTC

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 [Syncfusion]
Replied On February 7, 2019 06:52 AM UTC

Hi Milad,   
   
We have created a sample for your requirements as a web application. Please find the sample below   
   
   
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   
   
   
   
Regards   
Aravind Ravi   
 


Milad Dwaihi
Replied On February 7, 2019 10:57 AM UTC

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

Regards.

Aravind Ravi [Syncfusion]
Replied On February 8, 2019 08:37 AM UTC

Hi Milad,   
   
Thanks for your update.    
We will wait until hear from you.   
   
Regards,   
Aravind Ravi 

 


Milad Dwaihi
Replied On February 8, 2019 08:59 AM UTC

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 [Syncfusion]
Replied On February 8, 2019 12:58 PM UTC

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 
 
 
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 
 
 
 
 
 
 
Regards 
Aravind Ravi 
 


Milad Dwaihi
Replied On February 8, 2019 08:05 PM UTC

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 [Syncfusion]
Replied On February 11, 2019 05:34 AM UTC

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. 
 
 
For more details about expand and collapse in layout, please find the help documentation link as below. 
 
 
Regards, 
Ramya T 


Milad Dwaihi
Replied On February 11, 2019 07:57 AM UTC

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

Regards.

Ramya Thirugnanam [Syncfusion]
Replied On February 11, 2019 08:54 AM UTC

Hi Milad 
 
  
Thanks for your update.  
 
 
Regards, 
Ramya T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon