New to Kendo UI for jQuery? Download free 30-day trial

Move Diagram Shapes with Arrow Keys

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

In this article