CODEWITHSUNDEEP
javascriptangularjsangular-uing-grid
S. Ravi Kiran
S. Ravi Kiran

Reputation: 4303

Programmatically bring focus on first row in ng-grid

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?

Upvotes: 5

Views: 7247

Answers (3)

Mark Farmiloe
Mark Farmiloe

Reputation: 396

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.

Upvotes: 1

Gabriel
Gabriel

Reputation: 31

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.

Upvotes: 2

S. Ravi Kiran
S. Ravi Kiran

Reputation: 4303

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

Upvotes: 6

Related Questions