Org Chart displays nothing.

[Chad Carey]

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]

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]

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.    https://ej2.syncfusion.com/angular/documentation/diagram/automatic-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.

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();      };       Sample: https://stackblitz.com/edit/angular-gzdya5?file=app.component.ts

 

 

Regards, 

 

Naganathan K G 

 

 

[Chad Carey]

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]

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>'              }          }    Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/orgchartdragdropsample-242692422
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.  https://ej2.syncfusion.com/aspnetmvc/Diagram/Overview#/material

 

 

Regards, 

Shyam G