Highlight selection in Angular ui-grid (not ng-grid)

Question

For my work with Angular JS mesh, I use ui-grid instead of ng-grid, since ui-grid means a new version, cleaner Angular.

I have a grid that I populate with an http response, and I can select a row (based on finding the record matching the value of the $ scope variable) by calling the api.selection.selectRow method.

What I need to do next is scroll the grid to this entry.

There is an existing question on the same lines as for ng-grid, and the answer to this relates to undocumented functions that are not in ui-grid, so I can not use this approach.

The closest I have is to find $ scope.gridApi.grid to get a link to the actual grid, but looking at the properties and methods in the Chrome debugger doesn’t show anything like it can work.

Answer 1

You can use the cellNav plugin. You should already have a link to your row object from the selection. The documentation is here .

gridApi.cellNav.scrollTo(grid, $scope, rowEntity, null); 

Answer 2

I managed to hack something that works very well, but it's a bit dodgy and probably could be cleaner with a slightly more understandable understanding of Angular / jquery.

I used the dom browser browser to find that the scrollbars have a css class that we can find to find them, and then set the scroll properties for them to scroll the grid (the grid and scroll bars are separate divs, but their properties are connected in this way so that one of them changes the other).

It does not work fully to scroll to the last line of the grid. This may be a synchronization problem, I noticed that when using breakpoints, the grid appears on the screen a little more, and then shrinks to the final size. This can lead to scroll errors.

The first loop finds the height of the grid by adding rows and row position y for my data object (project), then we find the scroll bar and set it to scrollTop, trying to center the row on the screen without going beyond.

 var grid = $scope.projectsGridApi.grid; // var row = grid.rowHashMap.get(project.$$hashKey); var found = false; var y = 0; var totalY = 0; var rowHeight = 0; for (var rowIdx in grid.rows) { var row = grid.rows[rowIdx]; if (row.entity.$$hashKey == project.$$hashKey) { found = true; rowHeight = row.height; } if (!found) { y += row.height; } totalY += row.height; } // now find the scroll bar div and set it scroll-top // (todo: checking if we're at the end of the list - setting scrollTop > max means it doesn't work properly var grid = $scope.projectsGridApi.grid; // annoyingly this is nastily coded to find the scrollbar and isn't completely right // I think the grid is a little taller when this is called, then shrinks // which affects what the maximum is (so we might not always be able to put the selected item on screen if it is the last one). var holderDiv = $('#projectsGridHolder'); if (holderDiv) { var scrollBarDivs = holderDiv.find('.ui-grid-native-scrollbar'); if (scrollBarDivs) { for (var scrollBarDivIdx in scrollBarDivs) { var scrollBarDiv = scrollBarDivs[scrollBarDivIdx]; var scrollBarDivClass = scrollBarDiv.className; if (scrollBarDivClass) { if (scrollBarDivClass.indexOf('vertical') != -1) { var scrollHeight = scrollBarDiv.scrollHeight; var clientHeight = scrollBarDiv.clientHeight; if (rowHeight > 0) { y -= (clientHeight - rowHeight) / 2; // center on screen be scrolling slightly higher up } if (y < 0) y = 0; else if (y > totalY - clientHeight) y = totalY - clientHeight; scrollBarDiv.scrollTop = y; } } } } }