Combining the diagram with sortable

[Marek]

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

[Alex Hajigeorgieva]

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

[Marek]

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

[Viktor Tachev]

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

[Marek]

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?

[Marek]

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.

[Alex Hajigeorgieva]

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