Есть ли способ указать ширину столбца ag-grid в процентах? - PullRequest
Новая
       57

Есть ли способ указать ширину столбца ag-grid в процентах?

0 голосов
/ 14 мая 2018

Прямо сейчас, единственный способ указать ширину сетки столбца - добавить свойство width к определению столбца, например: 

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% не работает.

Есть ли обходной путь для этого?

Ответы [ 4 ]

0 голосов
/ 02 июля 2019

Мой обходной путь - это вычислить ширину родительского div AG-сетки и вычислить пиксели в процентах, которые будут назначены определенному столбцу. Вот решение с использованием 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

0 голосов
/ 21 мая 2018

Используя метод, предложенный @Phil, я могу получить сетку для определения доступной ширины порта просмотра, используя событие gridReady следующим образом:

В шаблоне компонента: 

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

В файле машинописи компонентов: 

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

Демо-версия:

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

0 голосов
/ 11 января 2019

Мой обходной путь - создать функцию, которая преобразует числовое значение из rems в пиксели: 

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

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

Затем используйте это в свойстве width определения столбца.

Пример использования для определения столбца ag-grid: 

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

Действительно, здесь не так уж много секретов, когда вам нужно использовать значение в пикселях вы можете использовать эту функцию.

0 голосов
/ 14 мая 2018

Нет, по умолчанию это невозможно. Вы можете установить ширину, minWidth и maxWidth только в абсолютных числах. В AgGrid проще всего иметь динамическую ширину - использовать this.gridOptions.api.sizeColumnsToFit();, поэтому они берут наименьшую ширину (в соответствии с указанной шириной в colDef) для существующих значений в своих ячейках.

Вы можете попробовать вычислить width вручную (onInit) на основе ширины окна, а затем повторно инициализировать AgGrid. Но я не рекомендую этого делать, потому что, когда пользователь изменяет размер окна, вам нужно будет снова выполнить вычисления (в Window-Resize-HostListener) и повторно инициализировать сетку. Это может быть возможно со временем отката (так что вы не будете повторно инициализировать каждую миллисекунду, пока пользователь перетаскивает свой угол браузера), но это немного хакерски, и в конце вы получите много очень трудных для отладки и трудно поддерживаемый код.

...