Programmatically focus on the first line in the ng grid

Question

In my project, I have a requirement to focus on the first line of ng-grid as soon as the grid loads, and it should go to the next line 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 line, it does not focus on the first line. You need to click a row to get focus. What is this additional operator that we need to write in order to get focus there?

Answer 1

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

We need to add the following operator to give the focus the selected item:

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

Answer 2

I managed to focus on the specific cell that did this:

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

.col1.colt1 refers to the second column (.col0.colt0 → 1st column)

In this case, I select the first row, the second row will be selected with:

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

This is a bit hacky, but it works.

Answer 3

A slight deviation from the jQuery answer:

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

In this case, first you find the desired row, the third in this case, and then the column with the column name "age" in this case. This is a little more stable if the columns change or reorder.