Update text shape from Diagram-app sample

4 posts, 0 answers
  1. Paulo
    Paulo avatar
    10 posts
    Member since:
    May 2014

    Posted 27 Jul 2015 Link to this post

    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 ?

  2. Ianko
    Admin
    Ianko avatar
    1720 posts

    Posted 29 Jul 2015 Link to this post

    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
  3. Paulo
    Paulo avatar
    10 posts
    Member since:
    May 2014

    Posted 29 Jul 2015 in reply to Ianko Link to this post

    Thank worked.
  4. Bhavya
    Bhavya avatar
    43 posts
    Member since:
    Aug 2015

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

    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.
Back to Top