Server-Side Programming

[Lex]

Hi
I realize everything in my project as in your example:

http://www.telerik.com/help/aspnet-ajax/diagram-server-side.html

But if you display the text goes beyond. How can I fix the problem?

[Vessy]

Hi Lex,

The experienced behavior is connected with a limitation in the RadDiagram control to wrap multi-line text. We have already planned the implementation of such a feature, but for the time being you can use the approach used in the RadDiagram Overview demo, utilizing the control's Visual functionality. For example:

<telerik:RadDiagram ID="theDiagram" runat="server" Skin="Metro">
    <ShapesCollection>
        <telerik:DiagramShape Id="s1" Type="rectangle" X="170" Y="50" Width="140" Height="140" Visual="visualizeShape">
            <ContentSettings Text="Can I solve it|alone" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="s2" Type="rectangle" Width="140" Height="140" X="350" Y="50" Visual="visualizeShape">
            <ContentSettings Text="I found|a solution in|the forums" />
        </telerik:DiagramShape>
    </ShapesCollection>
</telerik:RadDiagram>
<script>
    function pageLoad() {
        var diagram = $find("<%= theDiagram.ClientID %>").kendoWidget;
        cleanUpShapesContent(diagram.shapes);
    }
    function visualizeShape(options) {
        var ns = kendo.dataviz.diagram,
             canvas = $telerik.$("#<%= theDiagram.ClientID %>").getKendoDiagram().canvas,
             lineHeight = 16,
             type = options.type,
             shape = new ns.Group({ autoSize: true }),
             textLines = [];

        if (options.type != "text" && options.content && options.content.text) {
            text = options.content.text.split("|");

            var textHeight = options.height - (text.length - 1) * lineHeight;

            for (var i = 0; i < text.length; i++) {
                var y = (i * lineHeight);

                textLines.push(new ns.TextBlock({
                    text: text[i],
                    x: 0,
                    y: y,
                    width: options.width,
                    height: textHeight + 2 * y,
                    color: options.stroke.color,
                    fontFamily: "Segoe UI"
                }));
            }
            options.content.text = "";
        }

        if (type == "rectangle") {
            shape.append(new ns.Rectangle(options));
        }

        for (var j = 0; j < textLines.length; j++) {
            var textLine = textLines[j];
            shape.append(textLine);
            canvas.append(shape);
            textLine.align(options.content.align);
            canvas.remove(shape);
        }

        return shape;
        }

        function cleanUpShapesContent(shapes) {
            Array.forEach(shapes, function (shape) {
                shape.content("");
            });
        }
</script>

I hope this information will be helpful for you in implementing the desired scenario.

Kind regards,
Vessy
Telerik