1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Org Chart displays nothing.

Org Chart displays nothing.

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?

4 Replies
CC Chad Carey 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.

NG Naganathan Ganesh Babu Syncfusion Team 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 
 
 


CC Chad Carey 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. 

SG Shyam G Syncfusion Team 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 


Loader.
Up arrow icon