Shape Templates
You can fully control where and how data is displayed in the RadDiagram shapes by defining a visual template. This requires the creation of a function, which uses the Kendo UI Diagram API for defining the visual element to render. You can set the name of this function in two properties of the diagram control:
-
The ShapeDefaultsSettings-Visual inner property of RadDiagram controls the template of all shapes, so if you set the function name here, the template will be applied to all of them.
-
If you use the Visual property of a DiagramShape object in the diagram, the template will be applied to that particular shape.
Example 1 creates the diagram with circles in Figure 1 rather than the default rectangular shapes.
Figure 1: Shapes with configured template.
Example 1: Client-side function that creates a template with green circles and white text for the shapes in the diagram.
<script type="text/javascript">
var visualTemplate = function (options) {
var diagram = kendo.dataviz.diagram;
var group = new diagram.Group({
autoSize: true
});
var circle = new diagram.Circle({
width: 100,
height: 100,
fill: "#32CD32"
});
group.append(circle);
var textBlock1 = new diagram.TextBlock({
text: "Name:",
color: "#ffffff",
fontSize: 16,
x: 28,
y: 32
});
group.append(textBlock1);
var textBlock2 = new diagram.TextBlock({
text: options.id,
color: "#ffffff",
fontSize: 16,
x: 28,
y: 50
});
group.append(textBlock2);
return group;
};
</script>
<telerik:RadDiagram ID="diagram1" runat="server">
<ShapeDefaultsSettings Visual="visualTemplate"></ShapeDefaultsSettings>
<ShapesCollection>
<telerik:DiagramShape Id="Shape1" X="100" Y="110">
</telerik:DiagramShape>
<telerik:DiagramShape Id="Shape2" X="230" Y="240">
</telerik:DiagramShape>
<telerik:DiagramShape Id="Shape3" X="360" Y="40">
</telerik:DiagramShape>
</ShapesCollection>
<ConnectionsCollection>
<telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
<FromSettings ShapeId="Shape1" Connector="Right" />
<ToSettings ShapeId="Shape2" Connector="Top" />
</telerik:DiagramConnection>
<telerik:DiagramConnection StartCap="FilledCircle" EndCap="ArrowEnd">
<FromSettings ShapeId="Shape1" Connector="Right" />
<ToSettings ShapeId="Shape3" Connector="Left" />
</telerik:DiagramConnection>
</ConnectionsCollection>
</telerik:RadDiagram>Example 2 creates a diagram with custom template, depending on each shape configuration. Each shape using the template contains both text and image.
Figure 2: Shapes with configured template with text and image.
Example 2: Shape template setting different text and image for each shape in the diagram.
<script>
function ImageTemplate(options) {
var dataviz = kendo.dataviz;
var group = new dataviz.diagram.Group({ autoSize: true });
var content = options.source.substring(options.source.lastIndexOf("/") + 1, options.source.lastIndexOf("."));
group.append(new dataviz.diagram.Rectangle({
x: 0,
y: 0,
width: options.width,
height: options.height,
fill: {
color: options.fill.color
}
}));
group.append(new dataviz.diagram.TextBlock({
text: content,
x: 90,
y: 30
}));
var image = new dataviz.diagram.Image({
source: options.source,
x: 10,
y: 10,
width: 60,
height: 60,
});
group.append(image);
return group;
};
</script>
<telerik:RadDiagram ID="RadDiagram1" runat="server">
<LayoutSettings Enabled="true" Type="Tree" Subtype="Down"></LayoutSettings>
<ShapeDefaultsSettings Visual="ImageTemplate" Width="200" Height="80"></ShapeDefaultsSettings>
<ShapesCollection>
<telerik:DiagramShape Id="s1" Source="./Images/Daniel Moor.jpg">
<FillSettings Color="#7F7F7F" />
</telerik:DiagramShape>
<telerik:DiagramShape Id="s2" Source="./Images/Diego Wilson.jpg">
<FillSettings Color="#C0C0C0" />
</telerik:DiagramShape>
<telerik:DiagramShape Id="s3" Source="./Images/Ann Brown.jpg">
<FillSettings Color="#C0C0C0" />
</telerik:DiagramShape>
</ShapesCollection>
<ConnectionsCollection>
<telerik:DiagramConnection>
<FromSettings ShapeId="s1" Connector="Bottom" />
<ToSettings ShapeId="s2" Connector="Top" />
</telerik:DiagramConnection>
<telerik:DiagramConnection>
<FromSettings ShapeId="s1" Connector="Bottom" />
<ToSettings ShapeId="s3" Connector="Top" />
</telerik:DiagramConnection>
</ConnectionsCollection>
</telerik:RadDiagram>