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

Manually position a node

6 Answers 162 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
pankaj
Top achievements
Rank 1
Veteran
pankaj asked on 28 Aug 2020, 02:21 PM
Is there a way in which we position a node manually at a position and it retains that position?

6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 01 Sep 2020, 01:14 AM

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

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/.

0
pankaj
Top achievements
Rank 1
Veteran
answered on 01 Sep 2020, 04:39 AM

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.

0
Eyup
Telerik team
answered on 02 Sep 2020, 06:12 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
pankaj
Top achievements
Rank 1
Veteran
answered on 08 Sep 2020, 11:46 AM

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?

0
pankaj
Top achievements
Rank 1
Veteran
answered on 09 Sep 2020, 12:11 PM

How can we apply same logic along the editing example:

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

0
Eyup
Telerik team
answered on 10 Sep 2020, 04:44 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Diagram
Asked by
pankaj
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
pankaj
Top achievements
Rank 1
Veteran
Share this question
or