<div id="orgchart"></div>
<script>
var dataSource = new kendo.data.OrgChartDataSource({
    data: [
        { id: 1, name: "John Smith", title: "CEO", avatar: "https://demos.telerik.com/kendo-ui/content/web/treelist/people/1.jpg", parentId: null },
        { id: 2, name: "Jane Doe", title: "CTO", avatar: "https://demos.telerik.com/kendo-ui/content/web/treelist/people/3.jpg", parentId: 1 }
    ],
    schema: {
        model: {
            id: "id",
            parentId: "parentId",
            fields: {
                id: { type: "number" },
                parentId: { type: "number", nullable: true },
                name: { type: "string" },
                title: { type: "string", nullable: true },
                avatar: { type: "string", nullable: true }
            }
        }
    }
});

$("#orgchart").kendoOrgChart({
    height:800,
    dataSource: dataSource,
    template: (data) => `
        <div class='k-card-body'>
            <img class='k-card-image' src='${data.avatar}' alt='${data.name}' />
            <h4 class='k-card-title'>${data.name}</h4>
            <h5 class='k-card-subtitle'>${data.title}</h5>
        </div>
    `
});

/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Avatar field configured for OrgChart model");
</script>