Customize shape with multiple lines of text.

18 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
    1567 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. Fit2Page
    Fit2Page avatar
    373 posts
    Member since:
    Feb 2007

    Posted 22 Nov 2016 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

  4. Ianko
    Admin
    Ianko avatar
    1699 posts

    Posted 24 Nov 2016 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.
  5. Fit2Page
    Fit2Page avatar
    373 posts
    Member since:
    Feb 2007

    Posted 24 Nov 2016 in reply to Ianko Link to this post

    Hi Ianko,

     

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

    Marc
  6. Fit2Page
    Fit2Page avatar
    373 posts
    Member since:
    Feb 2007

    Posted 25 Nov 2016 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

  7. Fit2Page
    Fit2Page avatar
    373 posts
    Member since:
    Feb 2007

    Posted 25 Nov 2016 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

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

    Posted 25 Nov 2016 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(),

     

  9. Bhavya
    Bhavya avatar
    42 posts
    Member since:
    Aug 2015

    Posted 15 Dec 2016 in reply to Ianko Link to this post

    Hi Peter lanko,
    I am creating a raddigram as in this link "http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/functionality/shape-templates"
    but i am not using DiagramShape. i am able to get the data as shown in the picture pic1.
    later i am calling a function to check the value has been increased or not, if value increased i have to update the value. only value should be updated, i should not redraw whole shape. can i do that? if so how?
    Please help me in this context.
    in timer i am doing in this way but not able to update.
    aspx:
    <telerik:RadDiagram runat="server" ID="theDiagram" width="1330" RenderMode="Auto">
                            <ClientEvents OnClick="OnClick"  />
                            <ShapeDefaultsSettings Visual="ImageTemplate"></ShapeDefaultsSettings>
    </telerik:RadDiagram>
    ImageTemplate:
    function ImageTemplate(options) {
                       var dataviz = kendo.dataviz;
                        var group = new dataviz.diagram.Group({ autoSize: true });
                        var backGID = options.id;
                        if (backGID != "s1") {
                            group.append(new dataviz.diagram.Rectangle({
                                x: 0,
                                y: 0,
                                width: options.width,
                                height: options.height,
                                width: 195,
                                height: 75,
                                border_radius: 5,
                                background: "webkit-linear-gradient(top,  #bed2e2 0%,#abd3ee 94%,#d5ebfb 100%)",
                                fill: {
                                    color: "#bed2e2"

                                }
                            }));

                            var textWrap1 = options.content.substring(0, 12);
                            var textWrap2 = options.content.substring(12, 19);
                            group.append(new dataviz.diagram.TextBlock({
                                text: textWrap1,
                                color: "#000000",
                                x: 70,
                                y: 10
                            }));

                            if (textWrap2 != "") {
                                group.append(new dataviz.diagram.TextBlock({
                                    text: textWrap2,
                                    color: "#000000",
                                    x: 70,
                                    y: 25
                                }));
                            }


                            var img = options.content;
                            if (img.indexOf("ead") != -1) {
                                img = "../Images/Img_HeadCount.png";
                                group.append(new dataviz.diagram.TextBlock({
                                    text: options.Counter,
                                    color: "#FF0000",
                                    x: 100,
                                    y: 45
                                }));
                            }
                            else if (img.indexOf("oll") != -1) {
                                img = "../Images/Img_Rollcall.png";
                                group.append(new dataviz.diagram.TextBlock({
                                    text: options.Counter,
                                    color: "#FF0000",
                                    x: 100,
                                    y: 45
                                }));
                               
                            }
                            else {
                                img = "../Images/Img_Assembly_Point.png";
                                group.append(new dataviz.diagram.TextBlock({
                                    text: options.Counter,
                                    color: "#FF0000",
                                    x: 100,
                                    y: 45
                                }));
                            }
                            var image = new dataviz.diagram.Image({
                                source: img,
                                x: 5,
                                y: 5,
                                width: 60,
                                height: 60,
                            });
                            group.append(image);
                        }
                        else {
                            var jsonFilename = '<%=backImageUpload%>';
                            if (jsonFilename == null || jsonFilename == "") {
                                var imageFolder = "../backgroundImage/backgound.jpg";
                            }
                            else {
                                var imageFolder = "../backgroundImage/" + jsonFilename + ".jpg";
                            }

                            var wid = dataviz.DEFAULT_WIDTH;
                            var image = new dataviz.diagram.Image({
                                source: "../backgroundImage/" + options.content + ".jpg",
                                x: 10,
                                y: 7,
                                width: wid + 550,
                                height: 400 + 200,
                            });
                            group.append(image);
                        }
                        return group;
                    };
    timer function:
    function CountDownTimer() {
                        $.ajax({
                            type: "POST",
                            url: "Frm_MusteringMonitor.aspx/GetSessionValue",
                            contentType: "application/json;",
                            data: JSON.stringify(),
                            success: function (Data) {
                                if (Data.d != "") {
                               var diagramWidget1 = $find("<%= theDiagram.ClientID %>").kendoWidget;
                                    var listOfObject = JSON.parse(Data.d);
                                    var dectionaryItem = Data.d.replace(/[&\/\\#+()$~%.'"*?<>{}]/g, '');
                                    var getVal = dectionaryItem.split(',');
                                    var leng = diagramWidget1.shapes.length;
                                    var i = 1;
                                    for (i = 1; i < leng; i++) {
                                        var jsonObjName = getVal[i - 1].split(":");
                                        var DiaObjname = diagramWidget1.shapes[i].options.content;
                                        if (jsonObjName[0] === DiaObjname) {
                                            var NewValue = jsonObjName[1];
                                            diagramWidget1.shapes[i].options.Counter = NewValue ;
    // i have three shapes so doing loop here and i am able to get the value here but not updating on diagram
                                        }
                                    }
                                }
                               },
                               error: function (XMLHttpRequest, textStatus, errorThrown) {
                               }
                           });
                    }
    Thanks in advance.
  10. Ianko
    Admin
    Ianko avatar
    1699 posts

    Posted 15 Dec 2016 Link to this post

    Hello Manu,

    There is no option to redraw only a portion of the shape, the entire SVG element should be redrawn. 

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Bhavya
    Bhavya avatar
    42 posts
    Member since:
    Aug 2015

    Posted 15 Dec 2016 in reply to Ianko Link to this post

    Thanks for the quick response.

    diagramWidget1.shapes[i].options.Counter 

    Y i can't, if i am able to get the value here? 

    if i redraw entire SVG element the value is flickering, which i don't want. So is there any other Solution? 

    Thanks in advance. 

  12. Ianko
    Admin
    Ianko avatar
    1699 posts

    Posted 16 Dec 2016 Link to this post

    Hello Manu,

    The best option I can think of is to follow UX and UI best practices and hide the Diagram behind a progress layer of some sort during redraw, for example, kendo.ui.progress

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Bhavya
    Bhavya avatar
    42 posts
    Member since:
    Aug 2015

    Posted 16 Dec 2016 in reply to Ianko Link to this post

    HI lanko,

    Thanks for the idea.

    we can do in the manner you said. but the data i am trying to update is continuous process it keeps on updating, so if i apply loading symbol i can see only loading image other than values.

    any other suggestion? 

  14. Ianko
    Admin
    Ianko avatar
    1699 posts

    Posted 16 Dec 2016 Link to this post

    Hello Manu,

    I am afraid there is no alternative option. As this is SVG, in order to update some values inside you need to redraw the entire visual. And as there is redrawing involved flicker is expected to appear as the browser renders these element on the screen. 

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. Bhavya
    Bhavya avatar
    42 posts
    Member since:
    Aug 2015

    Posted 16 Dec 2016 in reply to Ianko Link to this post

    ok thanku.

    for raddiagram cant we apply scroll bar when we done zoom In?
    please find the attached images
    Thanks in advance.

  16. Ianko
    Admin
    Ianko avatar
    1699 posts

    Posted 16 Dec 2016 Link to this post

    Hello Manu,

    Instead of scrolling with scrollbars I recommend you using the built-in pan behavior by using Ctrl+Mouse to navigate through a zoomed diagram. 

    If the scrollbars are to be forced, then mouse scroll will work incorrectly with scrollbars plus you will need to redraw the entire diagram during scroll in order to show properly the Diagram. This is rather a huge effort as there is already a built-in pan functionality that handles that seamlessly. 

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Bhavya
    Bhavya avatar
    42 posts
    Member since:
    Aug 2015

    Posted 19 Dec 2016 in reply to Ianko Link to this post

    okay Thank you lanko.
  18. Bhavya
    Bhavya avatar
    42 posts
    Member since:
    Aug 2015

    Posted 20 Dec 2016 in reply to Ianko Link to this post

    hi lanko,

    i got the solution for the question i asked before.

    we have to use redrawVisual(). flickering problem got solved, application is working as expected.

    diagramWidget1.shapes[i].redrawVisual();

Back to Top