Using client-side diagram properties is not helpful

[Matthew]

I am using the diagram control on the client side and I wanted to get the X and Y co-ordinates of a shape. Going by your documentation for the Kendu UI dataviz web page and using the code below for testing I felt confident this would work.

var diagram = GetRAD('rdMap').get_kendoWidget();

consolelog(diagram.shapes[0].x);

consolelog(diagram.shapes[0].y);

 

However, the result I got back was an error message of undefined in the console when checking the output. Even though on testing if I used the .id for the object it should the Id I had given it. So, after looking around for quite some time I can across the code for the bound change event which should the following very similar to the following line..

var myX = shape._bounds.x;

 

When I applied the code found to my web application I was able to read the X,Y position of each shape; the documentation about the use of properties for shapes/connections and the other structures means I am now at a loss for doing the simplest tasks client-side.

For example I need to be able to change the color of a shape; but I just dont know how to do it. As when I use the code shape.fill.color = #ff0000; the error message shown in the log is color is undefined and I have no idea when to look to find an example of this on the client side as the documentation for me does not help. I need to better examples of client side code from the point of view of someone who is using UI for ASP.NET AJAX or documentation along with code samples that work (ie.e the shapes.fill.color entry doers not help)..

For now can I have some help on coloring the shape as I currently have a diagram with 300 shapes and 400-500 connections; so when a use needs to highlight a shape through search a name I can highlight this in the diagram for matches.

[Vessy]

Hi Matthew,

All properties listed in the Kendo UI diagram API are available through the options object:

                diagram.shapes[0].options.x
                diagram.shapes[0].options.y
                diagram.shapes[0].options.fill.color

Nevertheless, your assumption is correct and the coordinates of the diagram shapes are available also through each shape's bounds() object:

            function onLoad(diagramObj, args) {
                var diagram = diagramObj.get_kendoWidget();
                console.log(diagram.shapes[0].bounds().x);
                console.log(diagram.shapes[0].bounds().y);
            }

Basically, the easiest way to test an objects API is to do it through the browser Developer Tools. In order to change the shape's color after its rendering you will need to redraw it. You can either call redraw() after setting the fill color, or pass the new colorization options directly to the redraw method():

                diagram.shapes[0].redraw({
                    fill: {
                        color: "#ff0000"
                    }
                });

 

Regards,
Vessy
Progress Telerik