Есть ли способ установить свойство detailRowHeight на 100% в ag-grid? - PullRequest
Новая
       32

Есть ли способ установить свойство detailRowHeight на 100% в ag-grid?

0 голосов
/ 24 октября 2019

Недавно начал работу над мастер-структурой угловых угловых решеток. Структура имеет два уровня вложения мастер-детали. Мне нужно зафиксировать высоту внутренних - 2 сетки так, чтобы они занимали всю доступную недвижимость на экране. В настоящее время ag-grid имеет значение по умолчанию 300 px, и на мониторе с разрешением экрана 1920x1200 появляется много свободного или неиспользуемого пространства. Мне также нужно иметь фиксированные заголовки для всех сеток.

Будем благодарны за любые идеи или указатели ...

Обновление : Ссылка на разветвленную версию примера плунжера изag-grid здесь - https://next.plnkr.co/edit/yUzo4EqONEmgCmIw Это простая и базовая настройка для основной сетки.

Обратите внимание, что : я не установил высоту строки подробностей и настроил только одну запись для отображения в сетке для проверки на наличие проблемы.

Если вызапустите код plunker и просмотрите результат в отдельном окне, обратите внимание, что внутренняя / дочерняя сетка не занимает все пространство, доступное под ней. Другими словами, это не занимает столько места / высоты, которые доступны из родительского контейнера (строка сведений мастера). По умолчанию мастер detailRowHeight размером 300px устанавливает высоту для внутренней сетки. Также, из документации, реквизит detailRowHeight, похоже, не принимает что-то похожее на 100% или 100vh, а принимает только фиксированное количество пикселей. Добавил картинку из приведенного ниже примера и высоту / неиспользуемое пространство, на которое я ссылался

enter image description here

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

Ответы [ 2 ]

0 голосов
/ 25 октября 2019

Вы можете попробовать что-то вроде этого, я вытащил это из документации:

В вашем файле component.ts добавьте этот метод. Если это строка подробностей, она будет применять другие расчеты, чем другие строки. 

  public rowHeight(params) {
        if (params.node && params.node.detail) {
            var offset = 80;
            var allDetailRowHeight = params.data.callRecords.length * 28;
            return allDetailRowHeight + offset;
        } else {
            // otherwise return fixed master row height
            return 25;
        }
    };

В вашем шаблоне добавьте следующее: [getRowHeight]="rowHeight"

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [masterDetail]="true"
  [detailCellRendererParams]="detailCellRendererParams"
  [getRowHeight]="rowHeight"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

Надеюсь, это заставит вас двигаться вперед,Удачи!

https://www.ag -grid.com / javascript-grid-master-detail / # detail-row-height

0 голосов
/ 25 октября 2019

Так что у меня нет отличного, полного решения для вас, но в качестве отправной точки я бы использовал CSS для переопределения стилей, которые задает ag-grid - я не думаю, что detailRowHeight поможет.

Вот мой план, приближающийся к тому, что вы хотите, с помощью простого CSS, который я поместил в index.html. Вы можете использовать! Важное, чтобы переопределить стили ag-grid, или вы можете использовать javascript, чтобы установить CSS после того, как ag-grid это сделает. Я предпочитаю! Важно в этом случае и не нужно беспокоиться о времени. https://next.plnkr.co/edit/mmXBBJE5Wa1JrX7v

Проблема, с которой я не собирался сталкиваться, заключается в том, чтобы заставить ее динамически заполнять доступное пространство, в зависимости от выбранной строки, положения прокрутки и т. Д. Я не могу придумать ни одного простого способадобиться этого - я часто делаю подобные вещи в сетке и в итоге пишу javascript для вычисления доступного пространства, а затем устанавливаю CSS в javascript.

...