Move shape programmtically

[John]

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?

[Alex Hajigeorgieva]

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