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

Combining the diagram with sortable

6 Answers 268 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Marek
Top achievements
Rank 1
Marek asked on 18 Sep 2020, 01:31 PM

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

6 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 22 Sep 2020, 11:46 AM

Hello, Marek,

The Kendo UI Diagram is an svg while the Kendo UI Sortable is a standard Kendo UI widget that is initialized over DOM elements that can be reordered. Since the Diagram shapes can be placed anywhere on the surface, perhaps you are referring to their alignment that may be required in the case of a flowchart. The Kendo UI Diagram has an alignShapes() method that can be used when the shape changes its location or size.

If you need to create a flowchart, we have an example of that here:

https://docs.telerik.com/kendo-ui/knowledge-base/diagram-create-flowchart

For a more comprehensive sample, you can take a look at the HTML5 Diagram sample demo app here:

https://demos.telerik.com/kendo-ui/html5-diagram-sample-app

If neither of these suggestions seem suitable for your purposes, can you share with us a sample sketch or in any other way visualize what is the end goal so we can share another alternative?

Kind Regards,
Alex Hajigeorgieva
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
Marek
Top achievements
Rank 1
answered on 22 Sep 2020, 05:27 PM

I made an image with description. Please check it out.

I hope it will give You more details of what I want to achive :)

 

Regards,

Marek

0
Viktor Tachev
Telerik team
answered on 24 Sep 2020, 12:33 PM

Hello Marek,

 

Thank you for the provided information. As I understand it there will be restrictions of the possible connections for an item. When a shape is dropped these restrictions would be enforced.

In order to implement the behavior I would suggest using an approach similar to the one illustrated in the example below. It illustrates how you can drag and drop items over existing shapes.

https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/drag-and-drop-on-shapes

 

In order to fit the scenario you describe the logic in the drop event needs to be extended. You can add a condition that checks if the shape that is dragged can be dropped over the respective shape. If that is the case add the shape with the respective connections.

 

Regards,
Viktor Tachev
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
Marek
Top achievements
Rank 1
answered on 29 Sep 2020, 11:44 AM

Thank You for these examples. I have a question about diagram and drop target combination. Is it possibleto create a shape on a diagram and make it a drop target? I can't find this anywhere. Is it possible to add some new html element inside the specific shape on a diagram when I drop something on it?

0
Marek
Top achievements
Rank 1
answered on 29 Sep 2020, 04:05 PM

I have one more thought. Does Kendo offer any mechanism that would help connect HTML elements with lines?

Something like Diagram control but not using SVG.

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 01 Oct 2020, 11:59 AM

Hello, Marek,

The Diagram can be made a drop target without issues, in fact the online demo we shared earlier is doing just that:

$("#diagram").kendoDropTarget({
                drop: function(e) {
                    var item, pos, transformed;
                    if (e.draggable.hint) {
                        item = e.draggable.hint.data("shape");
                        pos = e.draggable.hintOffset;
                        pos = new Point(pos.left, pos.top);
                        var transformed = diagram.documentToModel(pos);
                        item.x = transformed.x;
                        item.y = transformed.y;

                        diagram.addShape(item);
                    }
                }
            });

The shapes can contain HTML, we show how to do this here:

https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/external-content-in-shapes 

If you wish to just draw some lines, and mix them with HTML Elements and use CSS to position the elements, you could use the Drawing API:

https://docs.telerik.com/kendo-ui/framework/drawing/dom-elements/basic-shapes

If you do not want to use SVG for the drawing, you could utilize canvas or VML:

https://demos.telerik.com/kendo-ui/drawing/paths

Regards,
Alex Hajigeorgieva
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
Marek
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Marek
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or