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

Org Chart displays nothing.

Thread ID:

Created:

Updated:

Platform:

Replies:

146289 Jul 29,2019 03:32 PM UTC Aug 1,2019 09:24 AM UTC ASP.NET MVC - EJ 2 4
loading
Tags: Diagram
Chad Carey
Asked On July 29, 2019 03:32 PM UTC

I am trying to get a basic org chart working following the examples. I can see that I am loading my data correctly and that the chart is attempting to render but nothing ever shows up. 

How do I create just a super basic, bare bones, org chart so I can at least see this thing work?

Chad Carey
Replied On July 29, 2019 04:31 PM UTC

ok I got it working....

now where is any kind of documentation to show you how to use the different chart formats? What if I want to change the default layout? How about the drag/drop functionality? the skin functionality? the anything? the documentation page is terrible for this. It just kind of says, you can do these things but never actually explains anything.

Naganathan Ganesh Babu [Syncfusion]
Replied On July 30, 2019 11:44 AM UTC

Hi Chad, 
 
now where is any kind of documentation to show you how to use the different chart formats? What if I want to change the default layout? 
Please refer to the below our online UG documentation link for more details about the diagram’s Layout manager. 
 
 
How about the drag/drop functionality? the skin functionality? the anything? the documentation page is terrible for this. It just kind of says, you can do these things but never actually explains anything. 
 
We have created a diagram layout sample in Angular EJ2 and it is available in the below link for download.  
  
We have created drop events for the diagram and added NodeConstraints AllowDrop from Default in getNodeDefaults method to drop on the parent node create connection between the nodes. Please refer to the code example below.  
  
Code example:  
  
Diagram.component.html  
  
<ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' [tool]='tool' [snapSettings]='snapSettings' (drop) = 'drop($event)'> 
  
Diagram.component.ts  
  
obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop; 
 
//Drop events to create connection between the nodes 
   public drop(args: any): void { 
      let connectorId = args.element.inEdges[0] 
    var connector = this.diagram.nameTable[connectorId]; 
    connector.sourceID = args.target.id; 
    this.diagram.dataBind(); 
    this.diagram.doLayout(); 
    }; 
  
 
 
 
Regards, 
 
Naganathan K G 
 
 


Chad Carey
Replied On July 31, 2019 02:17 PM UTC

with the node templating, is there a way to just define the content of a standard node to be HTML? If I wanted to make a template sort of like the one you show on the product page that has a small image + the name + the role, how is that done? I see how to create node templates but defining the content as anything other than some textElements is not really defined any where that I can see. 

Shyam G [Syncfusion]
Replied On August 1, 2019 09:24 AM UTC

Hi Chad, 
 
Query 
Response 
with the node templating, is there a way to just define the content of a standard node to be HTML? 
We have created a ASP.NET MVC sample in which we have rendered an layout with HTML node. We have set an node HTML content in setNodeTemplate function. Please refer to an code example below. 
 
Code example: 
 
  //Funtion to add the Template of the Node. 
        function setNodeTemplate(obj, diagram) {  
            //AllowDrop Constraints 
            obj.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop; 
            obj.height = 60; 
            obj.width = 180;  
            //Define HTML node 
            obj.shape = { 
                type: 'HTML', 
                content: '<div><div style="width:180px;height:60px;border:1px solid black"><img src=' + obj.data.ImageUrl + ' width="42" height="50"></img><div style="float:right;margin-left:47px;position:absolute;margin-top:-49px"><p>' + obj.data.Name + '</p></div><div style="float:right;margin-left:47px;position:absolute;margin-top:-29px"><p>' + obj.data.Designation + '</p></div></div></div>' 
            } 
        } 
 
 
 
If I wanted to make a template sort of like the one you show on the product page that has a small image + the name + the role, how is that done? 
in our online sample, we have rendered an layout with image and text element as an stack panel. Please refer to an setNodeTemplate function in the below online sample. 
 
 
 
Regards, 
Shyam G 


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