Edit this page

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.

diagram-visual-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.

diagram-visual-template

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>

See Also