Move Diagram Shapes with Arrow Keys

Updated on Dec 10, 2025

Environment

Product	Progress® Kendo UI® Diagram for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I enable the Arrow keys to move the shapes of the Kendo UI for jQuery Diagram?

Solution

To achieve this behavior:

1. Handle the load event of the Diagram and check whether the selected item is a shape.
2. If the clicked object is a shape, assign a handler to the standard keyPress event of the window object.
3. To move the shape depending on the pressed key, use the bounds() method of the Shape.

    <div id="diagram" style="height: 250px"></div>
    <script>
        var Point = kendo.dataviz.diagram.Point;
        $("#diagram").kendoDiagram({
            layout: {
                type: "tree",
                subtype: "right"
            },

            shapes: [
                { id: "1" },
                { id: "2" }
            ],
            connections: [
                {
                    from: "1",
                    to: "2"
                }
            ],
            click: attachMoveHandler
        });

        function attachMoveHandler(e) {
            var shape = e.item;

            if (shape instanceof kendo.dataviz.diagram.Shape) {
                if (!shape.from) {
                    $(window).keydown(moveShape);
                }
            }
        }
        function moveShape(event) {
            if (event.keyCode > 40 || event.keyCode < 37)
                return;

            var diagram = $("#diagram").getKendoDiagram();
            var shapes = diagram.select();

            if (event.keyCode && shapes) {

                for (var i = 0; i < shapes.length; i++) {
                    var bounds = shapes[i].bounds();

                    var x = bounds.x;
                    var y = bounds.y;
                    switch (event.keyCode) {
                        case 37:
                            bounds.x = bounds.x - 5;
                            break;
                        case 39:
                            bounds.x = bounds.x + 5;
                            break;
                        case 38:
                            bounds.y = bounds.y - 5;
                            break;
                        case 40:
                            bounds.y = bounds.y + 5;
                            break;
                    }
                    shapes[i].bounds(bounds);
                }
            }
        }
    </script>

See Also

• Basic Usage of the Diagram (Demo)
• JavaScript API Reference of the Diagram
• Pan with Mouse Wheel
• Drag and Drop on Existing Shapes