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

Move shape programmtically

1 Answer 71 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Veteran
John asked on 03 Dec 2020, 11:00 AM

In my diagram I have an event handler on the 'select'; so once a selection of 1 or more shapes is selected then the function fires and the args.selection is stored in a variable. As what is stated is that the args.selection is an array of shapes and/or connections.

I then have a javascript function that gets called when a button is clicked and the following javascript code is run....

            function arrangeH(item) {
                if (selection === null || selection.length === 1) { return true; }
                var diagram = $("#diagram").data("kendoDiagram");
                for (var i = 0; i < selection.length; i++) {
                    var shapeId = selection[i].id;
                    if (selection[i] instanceof kendo.dataviz.diagram.Shape) {
                        var posX = selection[i]._bounds.x; posX = Math.round(posX);
                        var posY = item._bounds.y; posY = Math.round(posY);
                        console.log('recorded position for: ' + shapeId);
                        $.ajax({
                            type: "POST", url: "ReportOutMap.aspx/saveMapPos", data: "{p1:'" + posX + "',p2:'" + posY + "',p3:'" + encodeURIComponent(shapeId) + "',p4:'false'}", contentType: "application/json; charset=utf-8", dataType: "json", sync: "false"
                        }).done(function (values) {
                            console.log('saved position for: ' + shapeId);
                            selection[i].position(new kendo.dataviz.diagram.Point(posX, posY));
                        }).fail(function (xhr, textstatus) { console.log('failed to save position for: ' + shapeId); });
                    }
                }
            }

The purpose of this function is to place all the shapes on the same Y axis point as the shape passed to the function. However, when this is run the new position is stored in the database BUT the actual visual position of the shape does not move. When I look at the browser console log pane, there is a javascript error stating the following...

Uncaught TypeError: Cannot read property 'position' of undefined
    at Object.<anonymous> (ReportOutMap.aspx:876)
    at i (jquery.min.js?v=1:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=1:2)
    at y (jquery.min.js?v=1:4)
    at XMLHttpRequest.c (jquery.min.js?v=1:4)

 

I feel like I am missing something, but the selection[i] has been identified as a shape?

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 07 Dec 2020, 10:41 AM

Hello, John,

Thank you for the provided code snippet.

The reason for the error is the ajax request amidst the for loop. By the time the ajax request has returned, the selection[i] is undefined because the request is asynchronous. you can see the same behaviour if you add a timeout:

  • working well synchronously
  • error if you wrap it in a setTimeout function

https://dojo.telerik.com/ETaKiZiB

I would suggest you collect the new positions in the for loop, then after it is done, post them all together and apply them in the success callback. 

Let us know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
John
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or