Does MVC Diagram allow drop actions?

3 posts, 0 answers
  1. Tim Titchmarsh
    Tim Titchmarsh avatar
    11 posts
    Member since:
    Sep 2005

    Posted 22 Aug 2017 Link to this post


    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. Tsvetina
    Tsvetina avatar
    2481 posts

    Posted 24 Aug 2017 Link to this post

    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>
        $(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);
                hint: function (element) {
                    return element.clone();
                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 ="shape");
                            var newShape = diagram.addShape(item);
                            diagram.connect(targetShape, newShape);
            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;
        .shapeItem {
            margin-top: 10px;
            display: inline-block;
            width: 80px;
            height: 80px;
            background-size: auto 100%;

    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.
  3. Tim Titchmarsh
    Tim Titchmarsh avatar
    11 posts
    Member since:
    Sep 2005

    Posted 25 Aug 2017 in reply to Tsvetina Link to this post



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

Back to Top