Manually position a node

[pankaj]

Is there a way in which we position a node manually at a position and it retains that position?

[Eyup]

Hi Pankaj,

 

You can achieve this requirement using the position setting provided by Kendo diagram:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/shape/methods/position

And freezing its position can be achieved if you set its selectable property to false:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/shape/configuration/selectable

Here is a live sample using both techniques:
https://dojo.telerik.com/uPeBOlaG/4

I hope this will prove helpful.

 

Regards,
Eyup
Progress Telerik

[pankaj]

Thank you for responding Eyup.

I am not sure if this would serve my purpose. Here we are programmatically assigning a position to the shape.

The use case is:

A user manually positions a shape on the screen - consider the editing example in demos

https://demos.telerik.com/kendo-ui/diagram/editing and datasource connectionsDataSource.

Now, when the shape reloads the second time, the shape requires to be at same position where the user placed it initially.

[Eyup]

Hello Pankaj,

 

This can be achieved using the following implementation:
https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/persist-shape-properties

 

Regards,
Eyup
Progress Telerik

[pankaj]

Thanks for the response.

The last given link is relevant. 

Another query is that can we have a combination of both i.e. only the nodes positioned by the user retains it's position and rest all nodes follow the layout selected?

[pankaj]

How can we apply same logic along the editing example:

https://demos.telerik.com/kendo-ui/diagram/editing

[Eyup]

Hello Pankaj,

 

You can achieve that by modifying the following line:

sessionStorage.setItem("shapes", JSON.stringify(newData));

Here, you can pass the newData collection of shapes whatever you prefer to be. You can preserve only one specific shape or multiple units. However, it need to happen manually and you will need to manually modify the javascript array and create a new one instead of newData.

Basically, this scenario is not related to the Diagram in particular but to the way you preserve the data. For example, with the editing demo you mentioned, you can still have this kind of capability. However, when passing the data back to the diagram, you will need to manually set to the widget where it should get its data from.

If it gets the data remotely like this:

                    read: {
                        url: serviceRoot + "/DiagramShapes",
                        dataType: "jsonp"
                    },

It means that you will need to save the shapes directly to the database. Otherwise, you can replace the remote url with your local data collection and pass it to the diagram instead:

 var dataShapes = JSON.parse(sessionStorage.getItem("shapes"));

I just want to clarify that this suggestion is merely a custom workaround idea and not tested on our side. By default, I am afraid this requirement is not supported.

 

Regards,
Eyup
Progress Telerik