Focus at first cell at the dataBound

[Yuri]

Hello,

I have a grid with the navigation option, for navigation between cells by Tab
I want to define on page loaded that  first cell in the grid will be in focus,
 from which onwards the user can navigate by using the Tab key in the grid.
You can see below the function
 that chooses the first cell

But,
in IE it works, in the chrome browser it does not work.
in Chrome browser it's look that  the first cell in focus (is getting gray border)
But the first navigation by Tab is not in the grid, it in the top menu
Not as desired within the grid itself.

call from dataBound function:
selectRowFirst(this);

        function selectRowFirst(grid) {
            //select row in grid after bind 
                var rowNo =0;
                var row = grid.tbody.find("tr[role='row']:eq(" + rowNo + ")");
                grid.select(row);

                var firstCell = grid.tbody.find("tr[role='row']:eq(" + rowNo + ")" + " td:eq(1)");
                grid.current(firstCell);
                firstCell.focus();
        }

By the way, I tried to attach a sample project I attached before, but I could not 
It seems you have changed the attachment size limit is very small. 
If you have another way I can send it to be excellent.

[Dimiter Madjarov]

Hi Sharon,


Indeed current() is the correct API method to use in the current case. As demonstrated in the documentation example, focusing the Grid table is also required in this scenario.
E.g.

function dataBound(e) {
    var cell = this.tbody.find("tr[role='row'] td:first");
    this.current(cell);
    this.table.focus();
}

I hope this information helps. Let me know if I could assist further.

Regards,
Dimiter Madjarov
Telerik

 

 

[Yuri]

Hi, 
First of all thanks for your response 
It was a great help to me, and indeed solved the problem for both browsers. 

I have another question about focus. 
Because I support navigatable within the grid,
I would be interested in using the Tab key to switch between grid cells. 

I have a problem with Combo editor when navigatable = true, The navigation within the drop down list is not right. 
Expected: Navigation by Tab cell containing Combo, drop down opened, and using the up and down arrows will be able to select a value from it. 
The current situation: the combo does not open and sometimes crossing with arrows to change values ​​without opening the drop down. 
  I have another grid other behavior is not good too, that the drop down is opened but one choice, without the possibility of a swap with arrows in it. 

When I canceled the navigation grid, navigatable = false, you could navigation through entries in combo with arrows, but already it was impossible to pass by Tabs between the cells. 

Looking forward to your help, 
Thank you!

[Dimiter Madjarov]

Hello Sharon,


By design, alt + down arrow should be pressed to open the ComboBox widget, once it is focused. You could skip this, by calling the open method of it's API in the dataBound event handler. For a quick reference, I modified the custom editor demo to demonstrate the case. Focus the product name column and tab to the Category column. The dropdown is opened and a category could be chosen via the up and down arrows.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik