将这些左上方向下处理并在kendo网格上输入键?

时间:2013-06-20 13:41:18

标签: javascript kendo-ui kendo-grid

我使用了剑道网格

我需要重写键盘事件来修改网格导航的行为。如果用户按下键盘上的向上或向下键,我想用焦点改变选定的行(而不仅仅是现在的焦点)。

这是我的网格和我的脚本:

<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>

除了已在kendo网格中使用的键之外,该脚本适用于所有键。当我向左向右按下输入空格键时,不会执行console.log。

你能解释一下为什么以及如何使用kendo网格处理这些特定的密钥?谢谢。

2 个答案:

答案 0 :(得分:1)

将您的活动附加到网格的 tbody 元素。

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

答案 1 :(得分:0)

我做了一个工作示例,所以在Kendo网格批处理编辑模式下,当用户位于kendo列的可编辑文本框中时,用户单击上/下箭头在上/下行之间移动并选择相应的行:

<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();
                }
            });