Does MVC Diagram allow drop actions?

[Tim Titchmarsh]

Hi

I can drag drop onto the kendo ui diagram tool and the drop functions as it should (based on your kendo ui demo) which I have downloaded.

(I cant see a similar MVC version which is a shame)

 

However, I just cannot get the drop function to work on the MVC version of the diagram control. I can start the drag and see that working but the drop never fires. I can drop onto other elements on the same layout. I'm using the   kendoDropTarget as per your demo. If I create a layout with both the MVC diagram and the kendo version (different id's) the kendo ones works the MVC one does not.

I'm using the latest R2 2017 with Chrome browser, MVC 5

Any ideas please?

Thanks Tim

 

[Tsvetina]

Hi Tim,

The drag and drop should work the same in an MVC Diagram. The only thing that I can think of that you should be more careful with is the timing of the kendoDraggable and kendoDropTarget initialization. You need to make sure that you run this logic in $(document).ready() or a later event to ensure that the Diagram is rendered and loaded on the client.

Here is a sample runnable snippet that you can copy into a project that has UI for ASP.NET MVC an run it:

<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 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) {

                if (e.draggable.hint) {
                    var position = diagram.documentToModel({ x: e.pageX, y: e.pageY });
                    var targetShape = shapeByPosition(position);
                    if (targetShape) {
                        var item = e.draggable.hint.data("shape");
                        var newShape = diagram.addShape(item);
                        diagram.connect(targetShape, newShape);
                        diagram.layout(diagram.options.layout);
                    }
                }
            }
        });


        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,
Tsvetina
Progress Telerik

[Tim Titchmarsh]

Hi

 

I think that's it, thanks for your help!