Как стилизовать детальную сетку в настройке основной детали ag-grid? - PullRequest
Новая
       123

Как стилизовать детальную сетку в настройке основной детали ag-grid?

0 голосов
/ 23 марта 2020

У меня есть сетка основных данных ag-grid , где одна главная строка обычно имеет только 1 или 2 подстроки в сетке сведений (всегда есть 2 столбца для сетки подробностей). Когда я пишу код, соответствующий примерам документации ag-grid, он всегда оставляет огромные пробелы под сеткой сведений и автоматически расширяет ширину сетки сведений до ширины контейнера.

pic of grid prob

Я хотел бы избавиться от лишних пробелов в сетке деталей, а также настроить размер сетки, чтобы столбцы были настолько широкими, насколько они должны соответствовать данным. (Таким образом, с правой стороны сетки подробностей будет пробел)

annonated pic of what i want

Я пробовал просматривать стили в chrome dev инструменты, но я не могу понять, что контролирует эти 2 аспекта стиля. Кроме того, установка domLayout = 'autoHeight' в параметрах сетки подробностей просто перемещает нижнюю часть сетки подробностей в последнюю строку, но не избавляет от лишних пробелов в тех случаях, когда имеется только 1 строка подробностей.

Плункр MVP (включает domLayout = 'autoHeight' в параметрах сетки деталей):

Реакция: https://plnkr.co/edit/K76FssFF4Ex538fn

Angular: https://plnkr.co/edit/0n5EllKejfyq9x4E

Исходные образцы plunkr взяты из "Простого примера" plunkr в документации master-detail ag-grid *1034*.

Ответы [ 2 ]

0 голосов
/ 24 марта 2020

После объединения ответа Нарена с некоторыми css поправками, это лучший результат, который я смог получить. Я не принимаю этот ответ, потому что это не то, что я хочу, но я могу жить с ним, пока я (или кто-то еще) не смогу найти что-то лучшее.

https://plnkr.co/edit/d9emrRiavR9gCpQl

По сути, я добавил эти 2 вещи к plunkr: 

this.getRowHeight = params => {
  const defRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
  if(params.node.detail) {
    const offset = 80;
    const detailRowHeight =
      params.data.callRecords.length * defRowHeight;
    var gridSizes = params.api.getSizesForCurrentTheme();
    return detailRowHeight + gridSizes.headerHeight + offset;
  } else {
    return defRowHeight;
  }
}

styles: ['::ng-deep .ag-details-row { width: 50% }']

Приемлемое решение - это способ изменить размер сетки детализации до ширины фактических столбцов ( а не произвольный процент)

Изображение:

enter image description here

(Вы можете удалить это небольшое дополнительное пространство под 1-й строкой детали сетка путем переопределения минимальной высоты одного из классов css сетки. Она появляется, только если в детальной сетке есть 1 строка)

0 голосов
/ 23 марта 2020

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

Нам нужно использовать этот метод из документации ag-grid. 

this.getRowHeight = function(params) {
      if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight =
          params.data.callRecords.length *
          params.api.getSizesForCurrentTheme().rowHeight;
        var gridSizes = params.api.getSizesForCurrentTheme();
        return allDetailRowHeight + gridSizes.headerHeight + offset;
      }
    };

Также в опциях сетки панели деталей нам нужно добавить это свойство, которое будет динамически устанавливать высоту. 

this.detailCellRendererParams = {
  detailGridOptions: {
    columnDefs: [
      { field: 'callId' },
      {
        field: 'duration',
        valueFormatter: "x.toLocaleString() + 's'",
      }
    ],
    defaultColDef: {
      flex: 1,
      editable: true,
      resizable: true,
    },
    onGridReady: function(params) {
      params.api.setDomLayout('autoHeight');
    },
  },
  getDetailRowData: function(params) {
    params.successCallback(params.data.callRecords);
  },
};

Ниже приведен рабочий пример для справки

Пример Plunkr

...