Kendo UI Diagram - content text values - kendo-ui

Question

I'm using shapeDefaults in constructing the diagram. The content -> text value should refer to the node's name property. For example, if the node object is:
var data = [{
designation: "CEO",
name: "Mitchell Johnson",
manages: [{
designation: "Vice President",
name: "Smith Cooper",
manages: [{
designation: "Director",
name: "Andrew Walker"
}, {
designation: "Director",
name: "Robert Thompson"
}]
}, {
designation: "Vice President",
name: "Harris Jones",
manages: [{
designation: "Director",
name: "Edward Collins"
}, {
designation: "Director",
name: "Thomas Wang"
}]
}]
}];
Here content -> text should refer to 'name' attribute and display it in the center.

Answer 1

Make sure you add 'shapeDefaults' to the diagram config:
shapeDefaults:
{
visual: visualTemplate
},
In the function visualTemplate, add your way of marking it up like :
function visualTemplate(options)
{
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle(
{
width: 210,
height: 75,
stroke:
{
width: 0
},
fill: dataItem.color
}));
g.append(new dataviz.diagram.TextBlock(
{
text: dataItem.name,
x: 5,
y: 20,
color: "#fff"
}));
}
if you ever get to know how to center the text, please tell me. I am looking for it :)
you can also look at : http://demos.telerik.com/kendo-ui/diagram/index