Programmatically bring focus on first row in ng-grid

Question

In my project, I have a requirement to bring focus on first row of ng-grid as soon as the grid loads and it should move to next row when I press the down key. I added the following event:

$scope.$on('ngGridEventData', function (e,s) {
    $scope.gridOptions.selectRow(0, true);
});

But this event just selects the first row, it doesn't take the focus on first row. The row needs to be clicked to get the focus there. What is that additional statement we need to write to get the focus there?

Synchrocyclotron

Answer 1

I reported it on github repo of ng-grid and got the solution. You can check the conversation here: https://github.com/angular-ui/ng-grid/issues/539

We need to add the following statement to bring focus to the selected element:

$(".ngViewport").focus();

Synchrocyclotron

Answer 2

I was able to focus on a specific cell doing this:

$($($(".ngCellText.col1.colt1")[0]).parent()).parent().focus();

.col1.colt1 refers to the 2nd column (.col0.colt0 -> 1st column)

In this case I'm selecting the 1st row, the 2nd row will be selected using:

$($($(".ngCellText.col1.colt1")[1]).parent()).parent().focus();

It's a bit hacky, but it works.

Eda

FYI, you don't need to call $() so much -- this is the same as your 2nd line of code: $(".ngCellText.col1.colt1").eq(1).parent().parent().focus(); – Straitlaced

Answer 3

A slight variation on the JQuery answer:

$('div[ng-row]').eq(2).find('.ageCell').focus()

This finds the row you want first, the third in this case, and then the column using the column name, 'age' in this case. It's just a bit more resilient if the columns change or are re-ordered.

Bumper