web-dev-qa-db-ja.com

ag-gridの列幅をパーセンテージで指定する方法はありますか？

現在、列グリッドの幅を指定する唯一の方法は、次のような列定義に幅プロパティを追加することです。

columnDefs: any[] = [
  { 
    headerName: 'ID',
    field: 'id',
    width: 50,
    type: 'numericColumn'
  }
];

ただし、次の例でわかるように、グリッドの列は画面表示の幅全体を占めていません。

https://stackblitz.com/edit/ag-grid-bss-test-nnojxg?file=app%2Fapp.component.ts

私は各列の幅をパーセンテージで設定できるようにしたいが、これを行う方法を見つけることができない。

width: 10%を使用しても機能しません。

これに対する回避策はありますか？

angularag-gridpercentagecolumn-width
7
HDJEMAI

いいえ、デフォルトでは不可能です。幅、minWidth、およびmaxWidthは絶対数でのみ設定できます。 AgGridに動的な幅を設定する最も簡単な方法は、this.gridOptions.api.sizeColumnsToFit();を使用することです。これにより、セルの既存の値に対して（colDefで指定された幅に従って）最小の幅が使用されます。

ウィンドウ幅に基づいてwidthを手動で（onInit）計算してから、AgGridを再初期化できます。ただし、ユーザーがウィンドウのサイズを変更した場合、再度計算して（Window-Resize-HostListenerで）グリッドを再初期化する必要があるため、お勧めしません。デバウンス時間で可能かもしれません（したがって、ユーザーがブラウザーコーナーをドラッグしている間、1ミリ秒ごとに再初期化しないでください）が、それは一種のハッキングであり、最終的には非常にデバッグが非常に困難になります保守が難しいコード。

7
Phil

@Philによって提案されたメソッドを使用することで、次のようにgridReadyイベントを使用して、利用可能なビューポート幅をグリッドに取得させることができます。

コンポーネントテンプレート：

<ag-grid-angular  class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"> 
</ag-grid-angular>

コンポーネントTypeScriptファイルの場合：

onGridReady(params) {
  params.api.sizeColumnsToFit();
}

デモ：

https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html

8
HDJEMAI

私の回避策は、数値をレムからピクセルに変換する関数を作成することでした：

const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);

const convertRemToPixel = (rem) => rem * remInPixel;

次に、列定義のwidthプロパティでこれを使用します。

ag-grid列定義での使用例：

{
    headerName: "Example",
    field: "exampleField",
    width: convertRemToPixel(3)
}

実際、ピクセルで値を使用する必要があるときはいつでも、この関数を使用できます。

3
GarouDan

私の回避策は、AG-Gridの親divの幅を計算し、特定の列に割り当てられる割合でピクセルを計算することです。 jQueryを使用したソリューションは次のとおりです。

  function columnWidth(id, percentage){
    var div = $("#" + id);  // HTML ID of Grid
    var parent = div.parent();
    var width = parent.width() * percentage/100;  // Pixel calculation
    return width;
}

var colDefs = [
       {
         field: "name",
         width: columnWidth("myGridId",25)
       } 
]

これは私にとってはうまくいきました。これが作業バージョンです： stackblitz.com/edit/js-l1gmbf

1
PRANSHU MIDHA