<div id="orgchart"></div>
<script>
var dataSource = new kendo.data.OrgChartDataSource({
    data: [
        { id: 1, name: "John Smith", title: "Chief Executive Officer", parentId: null },
        { id: 2, name: "Jane Doe", title: "Chief Technology Officer", parentId: 1 },
        { id: 3, name: "Mike Wilson", title: "Senior Software Developer", parentId: 2 },
        { id: 4, name: "Sarah Brown", title: "UX/UI Designer", parentId: 2 }
    ],
    schema: {
        model: {
            id: "id",
            parentId: "parentId",
            fields: {
                id: { type: "number" },
                parentId: { type: "number", nullable: true },
                name: { type: "string" },
                title: { type: "string", nullable: true }
            }
        }
    }
});

$("#orgchart").kendoOrgChart({
    dataSource: dataSource,
    template: (data) => `
        <div class='k-card-body'>
            <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("Title field configured for OrgChart model");
</script>