This is a migrated thread and some comments may be shown as answers.

Customize shape with multiple lines of text.

17 Answers 134 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Fred
Top achievements
Rank 1
Fred asked on 12 Jun 2015, 04:48 PM

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?

17 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 17 Jun 2015, 03:41 PM
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
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 22 Nov 2016, 10:12 AM

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

0
Ianko
Telerik team
answered on 24 Nov 2016, 02:57 PM

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.
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 24 Nov 2016, 03:21 PM

Hi Ianko,

 

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

Marc
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 25 Nov 2016, 08:12 AM

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

0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 25 Nov 2016, 09:13 AM

Please leave this issue Ianko.

I have to do some more testing myself here.

Eventually I am getting back to you.

 

Marc

0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 25 Nov 2016, 09:48 AM

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

 

0
Bhavya
Top achievements
Rank 1
answered on 15 Dec 2016, 11:38 AM
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.
0
Ianko
Telerik team
answered on 15 Dec 2016, 02:17 PM

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.
0
Bhavya
Top achievements
Rank 1
answered on 15 Dec 2016, 06:17 PM

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. 

0
Ianko
Telerik team
answered on 16 Dec 2016, 07:46 AM

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.
0
Bhavya
Top achievements
Rank 1
answered on 16 Dec 2016, 11:24 AM

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? 

0
Ianko
Telerik team
answered on 16 Dec 2016, 12:33 PM

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.
0
Bhavya
Top achievements
Rank 1
answered on 16 Dec 2016, 12:59 PM

ok thanku.

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

0
Ianko
Telerik team
answered on 16 Dec 2016, 01:15 PM

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.
0
Bhavya
Top achievements
Rank 1
answered on 19 Dec 2016, 08:39 AM
okay Thank you lanko.
0
Bhavya
Top achievements
Rank 1
answered on 21 Dec 2016, 04:47 AM

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

Tags
Diagram
Asked by
Fred
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Ianko
Telerik team
Bhavya
Top achievements
Rank 1
Share this question
or