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

    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?
  2. Vessy
    Admin
    Vessy avatar
    1389 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">
        <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
     

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top