Unable to find Diagram / End User Interaction in Kendo UI for ASP.NET MVC with DRAG AND DROP FUNCTIONALITY
1 Answer 10 Views
Neeraj
Top achievements
Rank 1
Neeraj asked on 01 Jun 2021, 05:08 AM

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.

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 03 Jun 2021, 03:09 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Asked by
Neeraj
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or