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.
|
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();
};
|
|
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.
|
