How to focus grid in Dialog?

[WoorimartDEV]

I have a question because the focus is not moving.
1. User presses button
2. Search dialog is opened.
3. Input and grid exist in dialog.
4. After searching in input, output search result on grid
5. Press ArrowDown at input to move focus to grid
6. Processing according to the keyboard that the user pressed on the grid (pressing the up key to go up within the grid, and pressing the down key to go down within the grid)

I've done up to process 4.
So when I pressed ArrowDown in the input of the dialog during process 5,
Call $('#grid').find('table')[0].focus();

When grid's navigable is true,
normally focuses on the header of the grid.
And the rest of the keystrokes except for the direction key within the grid are output normally.

If the grid's navigable does not enter false or navigable,
The grid's header is not focused.

The problem here is...
1. If navigable = true, ==> focus goes but direction key does not work
2. Without navigable => focus does not go by itself (keyboard event not detected)

To sum up, when there is input and grid in the dialog, I want to focus on grid, and I want to detect all key events of grid, including direction keys.

Ask for advice.

[Mihaela]

Hello,

Generally, when the Grid keyboard navigation is enabled (Navigatable()), the arrow keys can be used to navigate through the Grid cells. 

I have created a REPL sample for your reference, where the Grid is focused when the ArrowDown key is pressed at the input:

https://netcorerepl.telerik.com/QdOwbxvU12NhusGx12

Also, you could detect the pressed key when the Grid is focused as per the example below:

<script>
    $( document ).ready(function() {
        var grid = $("#grid").data("kendoGrid"); //get an instance of the Grid
        grid.table.on("keydown", function(e){ //handle the "keydown" event
            console.log(e.key); //get the pressed key
        });
    });
</script>

Let me know if the suggested approach works for you.

 

 

Regards, Mihaela Progress Telerik