how to replace diagram Node with Card or div element

[tracer]

Hello,

i want to create a customised diagram for a company having multiple sub-companie, and in the Node i want to display several properties not only the name, for example company name, description, location, image... like a small card.

is it possible to do so with the Diagram control ?

[Aravind Ravi]

Hi Tracer, 

 

We have created a sample to show employee name, designation, image on node. By using the diagram elements(image, text) we can able to place image and text on node with help of setNodeTemplate method  . At the time of every node render NodeTemplate call back method gets trigger. In the NodeTemplate method set image element, text element and push that element into stackpanel. So, for every node node template has been set. Please refer to below code example for how to set node template. 

//HTML 

 

  <ejs-diagram #diagram id="diagram" width="100%" height="590px" [scrollSettings]='scrollSettings' [getConnectorDefaults]='connDefaults' 

                [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' [setNodeTemplate]='setNodeTemplate' 

                [tool]='tool' [snapSettings]='snapSettings'> 

            </ejs-diagram> 

 

public setNodeTemplate(obj: NodeModel, diagram: Diagram): Container { 

        let content: StackPanel = new StackPanel(); 

        content.id = obj.id + '_outerstack'; 

        content.orientation = 'Horizontal'; 

        content.style.strokeColor = 'gray'; 

        content.padding = { left: 5, right: 10, top: 5, bottom: 5 }; 

        let image: ImageElement = new ImageElement(); 

        image.width = 50; 

        image.height = 50; 

        image.style.strokeColor = 'none'; 

        image.source = (obj.data as EmployeeInfo).ImageUrl; 

        image.id = obj.id + '_pic'; 

        let innerStack: StackPanel = new StackPanel(); 

        innerStack.style.strokeColor = 'none'; 

        innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 }; 

        innerStack.id = obj.id + '_innerstack'; 

 

        let text: TextElement = new TextElement(); 

        text.content = (obj.data as EmployeeInfo).Name; 

        text.style.color = 'black'; 

        text.style.bold = true; 

        text.style.strokeColor = 'none'; 

        text.horizontalAlignment = 'Left'; 

        text.style.fill = 'none'; 

        text.id = obj.id + '_text1'; 

 

        let desigText: TextElement = new TextElement(); 

        desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 }; 

        desigText.content = (obj.data as EmployeeInfo).Designation; 

        desigText.style.color = 'black'; 

        desigText.style.strokeColor = 'none'; 

        desigText.style.fontSize = 12; 

        desigText.style.fill = 'none'; 

        desigText.horizontalAlignment = 'Left'; 

        desigText.style.textWrapping = 'Wrap'; 

        desigText.id = obj.id + '_desig'; 

        innerStack.children = [text, desigText]; 

 

        content.children = [image, innerStack]; 

 

        return content; 

    }; 

} 

 

 

 

Sample: https://ej2.syncfusion.com/angular/demos/#/material/diagram/overview 

 

Regards 

Aravind Ravi 

[Kajal Maurya]

Kya hm isme stackpanel ko radius de skte h

[Moulidharan Gopalakrishnan]

Hi Kajal,

We have prepared a sample based on your requirement to set the corner radius to the stack panel. You can achieve this using the cornerRadius property in stackPanel.

We have utilized your code snippet with sample data and created a complete sample for your reference. Please refer to the provided code snippet and sample for guidance.

 

Code - Snippet:

function setNodeTemplate(obj, diagram) {

        // Create the outer container for the node content.

        content = new ej.diagrams.StackPanel();

        content.cornerRadius = '100';  // This makes the StackPanel circular

        return content;

}

 

Sample: Thpnsw (forked) - StackBlitz 

Regards,

Moulidharan G