Hello.

I'm trying to change shapes and connection styles after shapes and connections are added.

I found an answer (https://www.telerik.com/forums/change-color-of-shapes-dynamicaly) but it looks like shape.shapeVisual does not have domElement property anymore.

How can I change change shapes and connection styles dynamically?

Thank you.

Hello, I'm using Kendo UI for JQuery Diagram in Angular and I have a problem with the size.

I want the diagram to fit to its container, and I have the container height and width set to 100%.

When first initialized, the height and width of the "k-layer" div is automatically set to always 600px which does not fit to its container.

And when I resize the window manually, this "k-layer" size changes to fit to the container size.

My question is, how can I make this diagram to fit its container when initially loaded?

I tried calling kendo.resize("wrapper") when initially loaded, but this does not work.

FYI, I initialize the diagram in ngAfterViewInit().

Please see the screenshot I attached.

This screenshot shows the initial size is 600px.

And the code below is the code I use to initialize the diagram.

In development we have a user definable dependency map; the shapes position is recorded using the value gained from the shape._bounds.x and y co-ordinates and these are stored in the database. The scope of the dependency map can have anywhere from a few shapes to thousands of shapes for example.

The problem i have come across is that when I am creating one of these maps; I us a combination of zoom and pan to navigate the positions of the shapes. I then may close the browser or go somehwere else on our website BUT when I come back to the web page with the diagram on and the dependency map is loaded I have a completely blank view port. As the diagram is actually on the canvas but out of view of the view port; so, I need to be able to move the view port to show the dependency map.

I have tried a couple of methods to do this, but it has not worked; I need help with this tricky situation. But what I do not want to do is re-position all the shapes as if there are thousands of these then I would need to change each shape x,y coordinates in the database; heavy workload. I would like the view port to move also, because I could then give functionality to the user to remember the last view and restore the view on each visit.

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?

I have a question about the resize behavior of shapes in a diagram.

It appears to me that shapes are getting 'zoomed' or 'stretched' but not actually properly resized.

Please take a look at the attached screenshots.

Also, the borders (strokeWidth stays the same) get stretched and out of proportion, as well as the text (fontSize stays the same).

Is there any way to alter the 'resize' behavior of shapes - because in my opinion it's not actually a resize but rather a strech or zoom and doesn't really look as good as it should.

I would like all connections made to shapes to use ONLY the centre connector.

In the javascript code I use the diagram.connect method to connect the shapes; I did see an example of the use shape.getConnector method but cannot find any documentation on this. But I felt by doing something like....

diagram.connect(shape1.getConnector('middle'),shape2.getConnector('middle')

Should actually do what I wanted but using the key word 'middle' or 'center' did not work. Any help appreciated.

I have a diagram which allows shapes to be dragged around, but when the user is zoomed out and hovers over the shape the connectoes appear and block the shape from being dragged. I actually do not need the connectors to be visible at all; so the best option is to hide them.

My code uses the following; as I also use drag and drop from a list box to add shapes to the diagram:

var shape = new Shape({ id: values.d.balls[i].id, x: values.d.balls[i].x, y: values.d.balls[i].y, type: "circle", content: { text: values.d.balls[i].name }, fill: { color: values.d.balls[i].colour } });
diagram.addShape(shape);

And when I use the shaopeDefault to try and alter the connectors the above method does not seem to use the shapeDefault at all; as I thought I may be able supply a zero length connectors or limit it to 1 connector. But if the shapeDefault option does not work I need another solution.

Hi,

I need to know if using Telerik for jQuery controls I can make a specific kind of a flow chart. I need to have a list with order (sortable control would be good for this I quess), but also every element in this list should be able to connect with another one and store the information which one is connected to which (one-way) with option to filter out the ones that cannot be connected. I hope it's not too confusing ;P

Regards

The latest version of Diagram does not seem to provide a rotate handle on shape click. Resize handles are visible and work as before.
If I revert to an older version(2014) of dataviz the same code works normally and the rotate handle appears when you click on the shape to edit it.
I would use the old version but the old version doesn't work with some of the code I'm using for diagram.layout elements.

Is there some way to get the rotate handle working in the 2016 version of diagram?