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

Does MVC Diagram allow drop actions?

2 Answers 48 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Tim Titchmarsh
Top achievements
Rank 2
Tim Titchmarsh asked on 22 Aug 2017, 04:01 PM

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

 

2 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 24 Aug 2017, 10:17 AM
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-size: auto 100%;
    }
</style>


Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tim Titchmarsh
Top achievements
Rank 2
answered on 25 Aug 2017, 05:38 PM

Hi

 

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

Tags
Diagram
Asked by
Tim Titchmarsh
Top achievements
Rank 2
Answers by
Tsvetina
Telerik team
Tim Titchmarsh
Top achievements
Rank 2
Share this question
or