ngGridをスクロールして現在の選択を表示するにはどうすればよいですか？

Question

JavaScriptからngGridを選択し、gridOptions.selectItem()を呼び出しています。 multiSelectをfalseに設定しているので、選択された行は1つだけです。新しく選択した行を表示するためにngGridが自動的にスクロールするようにしたいと思いますが、これを行う方法はわかりません：だれでも助けてくれますか？

関連トピック：マウスクリックで行選択を無効にすることはできますか？もしそうなら、どうですか？

を追加するように編集

可能であれば私はまた、選択された行のキーボードナビゲーションを無効にしたいと思います。

何が働いた：

AardVark71の答えは働きました。 ngGridがグリッドオブジェクト自体への参照を保持する変数ngGridをgridOptions変数に定義していることがわかりました。

$scope.gridOptions.selectItem(itemNumber, true); 
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight); 

マイグリッドは13行ハイに固定され、そして私のロジックは、選択された行がグリッドの中央に表示されるようしよう：必要な機能は、このオブジェクトのプロパティを介して露出しています。

可能であれば、マウスの&キーボードの変更を無効にしたいと思います。

をこれはおそらく、「角度の道」に近いと同じ端実現：行はそれをすることができますクリックして選択されたときに有効であるが

// 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 && newValue.length > 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); 

をも働いていた何

少し戸惑う。

Answer 1

スクロールするにはscrollTopメソッドを使用できるようです。

も参照してくださいhttp://github.com/angular-ui/ng-grid/issues/183と、次のように@のブライアン・ワットから次plunker http://plnkr.co/edit/oyIlX9?p=preview

これは仕事ができる方法の例は次のようになります。

function focusRow(rowToSelect) { 
    $scope.gridOptions.selectItem(rowToSelect, true); 
    var grid = $scope.gridOptions.ngGrid; 
    grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight); 
} 

編集：

の場合を"選択された行のマウスとキーボードのイベントを無効にする"という質問の2番目の部分は、 w質問。あなたはあなたのenableRowSelectionをfalseに動的に設定したいのですか？それが可能かどうかは分かりません。

Answer 2

var grid = $scope.gridOptions.ngGrid; 
    var aggRowOffsetTop = 0; 
    var containerHeight = $(".gridStyle").height() - 40; 
    angular.forEach(grid.rowFactory.parsedData, function(row) { 
     if(row.entity.isAggRow) { 
      aggRowOffsetTop = row.offsetTop; 
     } 
     if(row.entity.id == $scope.selectedId) { 
      if((row.offsetTop - aggRowOffsetTop) < containerHeight) { 
       grid.$viewport.scrollTop(aggRowOffsetTop); 
      } else { 
       grid.$viewport.scrollTop(row.offsetTop); 
      } 
     } 
    }); 

Answer 3

私は自分自身と同じような動作をng-gridから探していたと思います。gridOptionsオブジェクトに追加された次の関数は、矢印キーによる選択を禁止します（ただし、shiftキーまたはCtrlキーを押したままにしておくことができます）。矢印キーを使用してリストを下に移動するとウィンドウをスクロールし、 ：

beforeSelectionChange: function(rowItem, event){ 
    if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){ 
     var grid = $scope.gridOptions.ngGrid; 
     grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2)); 
     angular.forEach($scope.myData, function(data, index){ 
     $scope.gridOptions.selectRow(index, false); 
     }); 
    } 
    return true; 
    }, 

編集： http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

希望に役立ちます：ここplunkrです！

Answer 4

上記の受け入れられた回答が最新のui-grid（v4.0.4 - 2017-04-04）で動作していないことがわかりました。ここで

は、私が使用するコードです：gripOptionsで

$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]); 

、あなたはonRegisterApiでgridApiを登録する必要があります。

onRegisterApi: function (gridApi) { 
    $scope.gridApi = gridApi; 
},