Customize shape with multiple lines of text.

8 posts, 0 answers
  1. Fred
    Fred avatar
    7 posts
    Member since:
    Jan 2015

    Posted 12 Jun 2015 Link to this post

    I have a diagram which is built based upon a couple of data objects in memory.  I need to basically have a title within the shape and then a description in a different font.

     Because the data objects are memory resident, I am building the diagram in code behind.

     

    Any suggestions?

  2. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 17 Jun 2015 Link to this post

    Hi Fred,

    The only way to achieve the desired multiple lines of text into a shape is to use an approach similar to the one from the following demo: Telerik ASP.NET Diagram Overview

    Unfortunately this is a client-side functionality and cannot be achieved on the server.


    Regards,
    Vessy
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 22 Nov in reply to Vessy Link to this post

    I am trying to create a newline in shape text from the server by \n but this is not working.

    Is there a way to let the linebreak render correctly on the clientside?

     

    Marc

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Nov Link to this post

    Hello Marc,

    The demo linked by Veselina demonstrates this exact concept—having \n characters on the server and some client-side logic that creates multiple text elements for the lines.  The code below is available in the scripts.js file from the demo: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx

    if(options.type != "text" && options.content && options.content.text) {
        text = options.content.text.split("\\n");
     
        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({
                autoSize: false,
                text: text[i],
                x: 0,
                y: y,
                width: options.width,
                height: textHeight + 2*y,
                color: options.stroke.color,
                fontFamily: "Segoe UI"
            }));
        }
        options.content.text = "";
    }

     

    Regards,
    Ianko
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  6. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 24 Nov in reply to Ianko Link to this post

    Hi Ianko,

     

    I am sorry....I missed the JS part.

    Marc
  7. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 25 Nov in reply to Ianko Link to this post

    Hi Ianko,

     

    Now I am playing around with this.

     

    When I change the Shape and Connection Collections in your demo code like this:

     

      <ShapesCollection>

                    <telerik:DiagramShape Id="action2" Type="rectangle" X="890" Y="70">
                        <ContentSettings Text="Prepare\na sample\nproject" />
                    </telerik:DiagramShape>
                    <telerik:DiagramShape Id="action3" Type="rectangle" X="890" Y="230">
                        <ContentSettings Text="Open a\nsupport ticket\nand send your\nproject" />
                    </telerik:DiagramShape>
                 
                </ShapesCollection>
                <ConnectionsCollection>
                  
                    <telerik:DiagramConnection>
                        <FromSettings ShapeId="action2" />
                        <ToSettings ShapeId="action3" />
                    </telerik:DiagramConnection>
                 
                </ConnectionsCollection>

     

     

    The boxes get invisible. This also happens in my own code.

    Can you determine what is happening here?

    Marc

  8. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 25 Nov in reply to Fit2Page Link to this post

    Please leave this issue Ianko.

    I have to do some more testing myself here.

    Eventually I am getting back to you.

     

    Marc

  9. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 25 Nov in reply to Fit2Page Link to this post

    OK one thing is the following:

     

    In server code I have this:

     

    <telerik:DiagramShape Id="action2" Type="Rectangle" X="890" Y="70">

     

    In JS discrimination is on "rectangle", watch the capitalization

    So in JS change this line to:

     

    type = options.type.toLowerCase(),

     

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