<divid="orgchart"></div><script>var dataSource =newkendo.data.OrgChartDataSource({data:[{id:1,name:"John Smith",title:"CEO",parentId:null},{id:2,name:"Jane Doe",title:"CTO",parentId:1},{id:3,name:"Bob Johnson",title:"Developer",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("Name field configured for OrgChart model");</script>