2

I'm trying to use kendo grid in my view, I want to create new row in the grid after pressing enter key. I can do this by writing following code:

<div id="GridContainer">
<div id="grid"></div>
</div>

$(document.body).keypress(function (e) {
    if (e.keyCode == 13) {
        var grid = $("#grid").data("kendoGrid");
        grid.addRow();
}
});

The problem is, on the page, whenever I press enter, its creating new row. But I want that only when the grid is focused. How can I do that? I tried to apply focus to the div, that contains the grid, but no luck. I skipped the code to generate the kendo grid for readability. Thanks.

Kailash P
  • 428
  • 3
  • 17
Badhon Jain
  • 938
  • 6
  • 20
  • 38

1 Answers1

3

Try this,

HTML

<div id="grid" tabindex="0"></div>

or

<div id="grid" contenteditable="true"></div>

SCRIPT

$(document.body).keypress(function (e) {
    if (e.keyCode == 13 && $("#grid").is(':focus')) {
        var grid = $("#grid").data("kendoGrid");
        grid.addRow();
    }
});

Read How can I give keyboard focus to a DIV and attach keyboard event handlers to it? And Jquery .focus() not working without tabindex attribute of div

Updated

Focus the div again after adding a row, like,

$(document.body).keypress(function (e) {
    if (e.keyCode == 13 && $("#grid").is(':focus')) {
        var grid = $("#grid").data("kendoGrid");
        grid.addRow();
        $("#grid").focus();
    }
});
Community
  • 1
  • 1
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • Can You please help me a bit more? I need to create new row every time I press enter. but with current code, after pressing once it's not creating any row. If I'm not wrong, its loosing focus of the grid. How can I keep the focus? – Badhon Jain Jul 10 '13 at 09:58
  • Means You want the `addition` of `row` will `fire` only once? – Rohan Kumar Jul 10 '13 at 11:11
  • no, I want to fire the event every time user press the enter button but only when he is working with the grid, that is the grid is in focus. – Badhon Jain Jul 10 '13 at 11:16
  • The above code will work `when` your `div#grid` is `focused`. – Rohan Kumar Jul 10 '13 at 11:28
  • its not working that way, after clicking the grid, if I press enter, it adds a row, but after that no new row! – Badhon Jain Jul 10 '13 at 11:34
  • You mean to say that when the `div` is focused and you `press enter key`, then it will not add any row? – Rohan Kumar Jul 10 '13 at 11:37
  • Sorry if I was not clear in my previous comments. Let me explain, The current scenario is, after loading the page, I need to click the grid first to focus it, then if I press enter it adds the new row as expected, but if I again press the enter, its not adding the new row anymore. But I want to add new row until I mouse click some other content on the page but grid, that is to shift the focus from grid. Hope It makes things clear. – Badhon Jain Jul 10 '13 at 11:41
  • I want to add new row until the focus is shifted from the grid, but now after adding one row, somehow the focus getting shifted, no new row is being created. – Badhon Jain Jul 10 '13 at 11:43
  • 1
    test the above I've made changes in it, – Rohan Kumar Jul 10 '13 at 11:48
  • Ok, I think we need to check if we are in the last column of the last row! let me try this. – Badhon Jain Jul 10 '13 at 11:58