Update text shape from Diagram-app sample

[Paulo]

I am using the Diagram-app sample to build my application. I need add option to change text from Shape.

 

I added the code:

 

<div class="configRow">
    <label class="configLabel">Texto</label>
    <div class="configControlContainer">
        <telerik:RadTextBox ID="shapeText" runat="server" EnabledStyle-HorizontalAlign="Right" MaxLength="50" MinValue="0" Width="110px">
            <ClientEvents OnBlur="updateShapeText" />
        </telerik:RadTextBox>
    </div>
</div>

 

But the client function "updateShapeText"​ not work !!!

 

 function updateShapeText(sender, args) {

        if (skipShapeConfigEvent) {
            return true;
        }
        var diagram = getDiagram();
        selection = diagram.select();

        selection[0].shapeVisual.options.content.text = sender.get_value();
    }​

 

Could you help me ?

[Ianko]

Hi Paulo,

I suggest using the same logic used for updateShapeStrokeColor method:

function updateShapeText(sender, args) {
    updateSelectedShapes({ content: { text: sender.get_value() } });
}

Regards,
Ianko
Telerik

[Paulo]

Thank worked.

[Bhavya]

Hi 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.