CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Bastien Vandamme
Bastien Vandamme

Reputation: 18465

Handle these up left right down and enter keys on kendo grid?

I use a kendo Grid

I need to rewrite the keyboard events to modify the behavior of the grid navigation. If fact when the user press up or down key on keyboard I would like to change the selected line with the focus (and not only the focus as it act now).

Here is my grid and my script :

<div id="my-grid">
    <div class="widget" id="grid" kendo-grid
        data-navigatable="true"
        data-scrollable='{"virtual":"true"}'
        ...
    </div>
</div>

<script type="text/javascript">
    $("#my-grid").keypress(function () {
        console.log("Handler for .keypress() called.");
    });
</script>

The script works fine for all keys except the keys that are already used in the kendo grid. When I press up left right down enter space keys the console.log is not executed.

Could you explain me why and how I can handle these specific key with kendo grid? Thank you.

Upvotes: 2

Views: 3100

Answers (2)

Vijai
Vijai

Reputation: 2509

I have made a working example, So in Kendo grid batch edit mode, when a user is in the editable text box in a kendo column, user click up/down arrow to move between rows up/down and select the respective rows:

<code>

            $("#LatestLinesGrid").on("keydown", "#FinalShip", function (e) {

                var arrows = [38, 40]; // Down and Up arrow keys
                var key = e.keyCode;

                if (arrows.indexOf(key) >= 0) {
                    //alert('arrow' + key);
                    e.preventDefault();
                    debugger;

                    var grid = $("#LatestLinesGrid").data("kendoGrid");

                    var row = $(this).closest("tr");
                    //get current row index
                    var rowIdx = $("tr", grid.tbody).index(row);

                    // to check first row and proceed further else exit - index start from 0 (first row)
                    // 38 - Up key, 40 - Down key
                    if (key == 38 && rowIdx == 0) {
                        return false;
                    }

                    //get total number of records in grid
                    var count = grid.dataSource.total();

                    // to check last row and proceed further else exit - index start from 0 (first row)
                    if (key == 40 && rowIdx == (count-1)) {
                        return false;
                    }

                    this.blur();
                    row.removeClass('k-state-selected');

                    row.trigger("change");

                    if (key == 40) {
                        var nextCell = $(this).closest("tr").next("tr[role='row']").find("td").eq(10);
                        $(this).closest('tr').next().addClass('k-state-selected');
                    }
                    else if (key == 38) {
                        var nextCell = $(this).closest("tr").prev("tr[role='row']").find("td").eq(10);
                        $(this).closest('tr').prev().addClass('k-state-selected');
                    }

                    var id = grid.dataItem(grid.select());

                    grid.closeCell();
                    grid.editCell(nextCell);

                    //alert(id.PlanID);
                    LatestLine_PreSelect();
                }
            });

Upvotes: 0

Petur Subev
Petur Subev

Reputation: 20203

Attach your event to the tbody element of the Grid.

  $('#my-grid').data().kendoGrid.tbody.on('keydown',function(){alert('foo')})

Upvotes: 1

Related Questions