How use different templates for child and parent nodes

[lahiru]

My requirement is to create a diagram which is using different widgets to child and parent nodes. Is there a way to use two or more different custom templates for parent and its child nodes. Please see the image below that is something I want to create

 

 

 

[Georgi Denchev]

Hi, lahiru,

You'll likely want to use the Diagram component to achieve something similar to the showcased picture.

In the Diagram, you have the option to change the appearance of a shape based on the data. This can be achieved with the shape.visual configuration.

Best Regards,
Georgi Denchev
Progress Telerik

[lahiru]

Hi Georgi,

My requirement, Nodes should visualized as different html widgets ( consist with headers, footers, many icons, texts). For that is there any way to use different html templates for particular nodes based on data ?  

[Georgi Denchev]

Hi, lahiru,

You can use different templates based on the data, however I am not certain which component you're using so I cannot suggest a more concrete solution.

In general, you'd have something similar to this:

// Nodes rendering mechanism

for... node... in data....

if (node.type === "type 1") { kendo.template(htmlTemplate1)(node) }
else if (node.type === "type 2") { kendo.template(htmlTemplate2)(node) }
else if () {} ...

Best Regards,

Georgi

[lahiru]

Hi Georgi, 

Thanks for your suggestion.

I'm using Diagram component. How can I apply above your suggestion to following my code.

<script>
        var data = [
            { id: 1, type: "type1", name: "Gevin Bell", position: "CEO", expanded: true, avatar: "../content/web/treelist/people/1.jpg" },
            { id: 2, type: "type2", name: "Clevey Thrustfield", position: "Operations Dpt. Team Lead", expanded: true, parentId: 1, avatar: "../content/web/treelist/people/2.jpg" },
            { id: 3, type: "type1", name: "Kendra Howell", position: "CMO", expanded: false, parentId: 1, avatar: "../content/web/treelist/people/4.jpg" },
            { id: 4, type: "type1", name: "Sean Rusell", position: "Financial Manager", expanded: false, parentId: 3, avatar: "../content/web/treelist/people/5.jpg" }
        ];

        $("#orgchart").kendoOrgChart({
            template:
                "<div class='custom'>" +
                "<div><img alt='Kendo UI for jQuery OrgChart #:name #' src=' #: avatar #'/></div>" +
                "<span>Name: <strong> #: name # </strong></span>" +                
                "</div>",
            groupHeaderTemplate: "<i> #: field #</i>: <strong>#: value # </strong>",
            groupField: "position",
            dataSource: data
        })</script>

[Georgi Denchev]

Hi, lahiru,

I created a small Dojo where the template renders different content based on the position of the person:

https://dojo.telerik.com/@gdenchev/ENorAcam 

Please keep in mind that the templates are made to modify the content of the card, not the card itself.

Best Regards,

Georgi