Unable to find Diagram / End User Interaction in Kendo UI for ASP.NET MVC with DRAG AND DROP FUNCTIONALITY

[Neeraj]

I check on site some examples for drag-drop in diagram bug that is only available for ASP.Net AJAX but I need them in ASP.NET MVC. I attached a link as well for reference.

https://demos.telerik.com/aspnet-ajax/diagram/examples/interactions/defaultcs.aspx

So, anybody helps me that it is available for ASP.NET MVC or not.

[Ivan Danchev]

Hello Neeraj,

The MVC Diagram's items can be dragged and dropped, as for dragging and dropping a shape onto the Diagram, this can be implemented as demonstrated in the example below. Once the item is dropped you can connect it to an existing item, similarly to the AJAX demo you linked.

<span id="draggable" class="shapeItem" data-shape='{"width":120,"height":120,"type":"rectangle", "fill": {"color": "green"}}' style="background-position: 0 0"></span>

@(
	Html.Kendo().Diagram().Name("diagram")
)
<script>

	$(document).ready(function () {
		var Point = kendo.dataviz.diagram.Point;
        var diagram = $("#diagram").data("kendoDiagram");
        var shape1 = diagram.addShape({ x: 100, y: 100, width: 120, height: 120, fill: { color: "red" } });
        var shape2 = diagram.addShape({ x: 300, y: 100, width: 120, height: 120, fill: { color: "yellow" } });
        diagram.connect(shape1, shape2);

        $("#draggable").kendoDraggable({
            hint: function (element) {
                return element.clone();
            }
        });

        $("#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);
        		}
        	}
        });


        function shapeByPosition(position) {
            var shapes = diagram.shapes;
            var shape;
            for (var idx = 0; idx < shapes.length; idx++) {
                shape = shapes[idx];
                if (shape.bounds().contains(position)) {
                    return shape;
                }
            }
        }
    });
</script>

<style>
	.shapeItem {
		margin-top: 10px;
		display: inline-block;
		width: 80px;
		height: 80px;
		background-image: url("https://demos.telerik.com/kendo-ui/content/integration/diagram/images/diagram-toolbox.png");
		background-size: auto 100%;
	}
</style>

Regards,
Ivan Danchev
Progress Telerik