Customize shape with multiple lines of text.

[Fred]

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?

[Vessy]

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

[Fit2Page]

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

[Ianko]

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

[Fit2Page]

Hi Ianko,

 

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

Marc

[Fit2Page]

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

[Fit2Page]

Please leave this issue Ianko.

I have to do some more testing myself here.

Eventually I am getting back to you.

 

Marc

[Fit2Page]

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(),

 

[Bhavya]

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.

[Ianko]

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

[Bhavya]

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. 

[Ianko]

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

[Bhavya]

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? 

[Ianko]

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

[Bhavya]

ok thanku.

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

[Ianko]

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

[Bhavya]

okay Thank you lanko.

[Bhavya]

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();