Server-Side Programming

2 posts, 0 answers
  1. Lex
    Lex avatar
    1 posts
    Member since:
    Jun 2014

    Posted 11 Jun 2014 Link to this post

    I realize everything in my project as in your example:

    But if you display the text goes beyond. How can I fix the problem?
  2. Vessy
    Vessy avatar
    1664 posts

    Posted 16 Jun 2014 Link to this post

    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">
            <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 Id="s2" Type="rectangle" Width="140" Height="140" X="350" Y="50" Visual="visualizeShape">
                <ContentSettings Text="I found|a solution in|the forums" />
        function pageLoad() {
            var diagram = $find("<%= theDiagram.ClientID %>").kendoWidget;
        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];
            return shape;
            function cleanUpShapesContent(shapes) {
                Array.forEach(shapes, function (shape) {

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

    Kind regards,

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top