Databases
StackOverflow2013
Postsdbo
POHow do I scroll an ngGrid to show the current selection?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I scroll an ngGrid to show the current selection?
    primarykey
    data
    text
    <p>I'm setting the selection of my ngGrid from JavaScript, calling <code>gridOptions.selectItem()</code>. I have multiSelect set to false, so there is only ever one row selected. I'd like the ngGrid to automatically scroll to show the newly selected row, but I don't know how to do this: can anyone help, please?</p> <p>On a related topic: can I disable row selection by mouse click? If so, how?</p> <p><strong>Edited to add</strong></p> <p>I'd also like to disable keyboard navigation of the selected row, if possible.</p> <p><strong>What worked:</strong></p> <p>AardVark71's answer worked. I discovered that ngGrid defines a property <code>ngGrid</code> on the <code>gridOptions</code> variable which holds a reference to the grid object itself. The necessary functions are exposed via properties of this object:</p> <pre><code>$scope.gridOptions.selectItem(itemNumber, true); $scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight); </code></pre> <p>My grid is fixed at 13 rows high, and my logic attempts to make the selected row appear in the middle of the grid.</p> <p>I'd still like to disable mouse &amp; keyboard changes to the selection, if possible.</p> <p><strong>What also worked:</strong></p> <p>This is probably closer to the 'Angular Way' and achieves the same end:</p> <pre><code>// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible $scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) { if (newValue != oldValue &amp;&amp; newValue.length &gt; 0) { var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]); scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight); } }, true); </code></pre> <p>although the effect when a row is selected by clicking on it can be a bit disconcerting.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMax
    1. USMax
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I scroll an ngGrid to show the current selection?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I scroll an ngGrid to show the current selection?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow do I scroll an ngGrid to show the current selection?
      1. USMatt Welch
      1. VTFavorite
    1. COCan you show code of what you got so far? It sounds like you can make use of the scrollTop method. See also https://github.com/angular-ui/ng-grid/issues/183 and the following plunker from @bryan-watts http://run.plnkr.co/plunks/oyIlX9/
      singulars
      1. POHow do I scroll an ngGrid to show the current selection?
      1. USAardVark71
    2. COOK I've got it working, thanks to this tip! There is an undocumented `ngGrid` property which is added to the `gridOptions` property that holds a reference to the actual grid itself. The function call to scroll the viewport is then `$scope.gridOptions.ngGrid.$viewport.scrollTop(rowNumber*$scope.gridOptions.ngGrid.config.rowHeight)` AardVark71 - Please update this to an Answer & I'll credit you: many thanks!
      singulars
      1. POHow do I scroll an ngGrid to show the current selection?
      1. USMax
    3. COGlad it worked for you, I'll rephrase it as an answer
      singulars
      1. POHow do I scroll an ngGrid to show the current selection?
      1. USAardVark71
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload