web-dev-qa-db-ja.com

ag-gridでセルの選択を無効にする方法は？

Angularプロジェクトに単純なag-gridがあり、その列の1つのセルの選択を無効にしたい。選択中にデフォルトの青いアウトラインを削除するだけでも問題ありません。ユーザーがセル内をクリックすると、セルが視覚的に変化します。

ColDefにはプロパティsuppressNavigableがあり、タブキーを使用してセルを選択することはできませんが、クリックすることで選択できます。また、グリッド自体はsuppressCellSelectionを提供しているように見えますが、十分にきめ細かく見えず、とにかく何にも影響を与えないようです。

だから、この青い境界線のセル選択を削除するにはどうすればよいですか？

これらの列定義に使用するコードは次のとおりです。

this.columnDefs = [
  { headerName: 'One', field: 'one' },
  { headerName: 'Two', field: 'two' },
  { 
    // I want to disable selection of cells in this column
    headerName: 'I want no cell selection!', 
    field: 'three',   
    suppressNavigable: true,
    editable: false,
  }
];

以下は、私がテストに使用していたStackblitzの例です： https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection

この列に表示したくない青い境界線のスクリーンショットを次に示します。 I don't want to see the blue border

angularag-gridag-grid-ng2
11
Chris Farmer

gridOption.suppressCellSelection = trueを設定すると、すべての列のセルのセル選択を無効にできることに注意してください。

ここでの質問は、特定の列のセルが選択されたときに強調表示された境界線を表示しないことに関するものです。

これは、CSSのビットとcellClassのColDefプロパティによって実現できます。

以下にCSSを追加する必要があります。

.ag-cell-focus,.ag-cell-no-focus{
  border:none !important;
}
/* This CSS is to not apply the border for the column having 'no-border' class */
.no-border.ag-cell:focus{
  border:none !important;
  outline: none;
}

cellClassのColDefと同じクラスを使用します

suppressNavigable: true,
cellClass: 'no-border'

ライブの例： aggrid-want-to-disable-cell-selection
これは、マウスクリックを使用して焦点を合わせたセルの境界線を表示しません。

17
Paritosh

GridOptionsでsuppressCellSelectionオプションを使用することをお勧めします。 CSSのクイックフィックスは、私が推奨するものではありません。

this.gridOptions = {
  // Your grid options here....
  suppressCellSelection: true
};
6
Ryan Tsui

このCSSハックを試すことができます。カスタムフラグは必要ありません。

.ag-cell-focus, .ag-cell {
    border: none !important;
}

例- https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css

enter image description here

0
Jossef Harush