Строки полной ширины сетки Ag-grid не работают с компонентами React.

Я не уверен, что я здесь делаю что-то не так, или документация неверна или вводит в заблуждение. Я пытаюсь использовать функцию FullWidthRowCell для панелей деталей для каждой строки. Однако, похоже, это не работает полностью, как описано в документации. Поскольку я недавно перешел с v4 на v6 ag-grid, я подумал, что спрошу здесь, не ошибся ли я, прежде чем делать отчет об этом.

Описание:

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

Ссылки на документацию:

раздел: Строки полной ширины и основные подробные сетки

Предоставьте fullWidthCellRenderer, чтобы сообщить сетке, какой cellRenderer использовать при выполнении рендеринга fullWidth.

CellRenderer может быть любым ag-Grid cellRenderer. Обратитесь к рендерингу ячеек, чтобы узнать, как создавать элементы CellRenderers. CellRenderer для fullWidth имеет одно отличие от обычных cellRenderers, то есть в переданных параметрах отсутствует значение и информация о столбце, поскольку cellRenderer по определению не привязан к определенному столбцу. Вместо этого вам следует отказаться от параметра данных, который представляет значение для всей строки.

раздел: React Cell Rendering, Указание React cellRenderer

Этот же механизм может заключаться в использовании React Component в следующих местах:

colDef.cellRendererFramework
colDef.floatingCellRendererFramework
gridOptions.fullWidthCellRendererFramework
gridOptions.groupRowRendererFramework
gridOptions.groupRowInnerRendererFramework

gridOptions.fullWidthCellRendererFramework - это указанный параметр!

Пример настройки:

Ниже приведены некоторые из импортированных частей моих настроек (да, без определений col и прочего, что есть в моей актуальной версии).

параметры сетки (фрагмент):

gridOptions = {
  doesDataFlower: (data) => { return true; }
  isFullWidthCell: function(rowNode) {
      var rowIsNestedRow = rowNode.flower;
      return rowIsNestedRow;
  },
  getRowHeight: function(params) {
    var rowIsNestedRow = params.node.flower;
    return rowIsNestedRow ? 100 : 25;
  },
  fullWidthCellRendererFramework: AppointmentDetail
}

Простой тестовый компонент-заглушка, который я пробовал

class AppointmentDetail extends React.Component<any, any>
{
    render() {
        return <div>AppointmentDetail</div>
    }
}

Однако, если я использую метод без реакции

fullWidthCellRenderer: (params) => { return "<div>Test</div>"; }

или старый метод для реагирования компонентов (который, как я думал, больше не предназначен для использования автором)

fullWidthCellRenderer: reactCellRendererFactory(AppointmentDetail)

тогда вся строка отображается правильно.

Предупреждения:

ag-Grid: you need to provide a fullWidthCellRenderer if using isFullWidthCell()

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

Версия: На всякий случай ... вот моя версия, взятая из моих зависимостей webpack.

"ag-grid": "^6.0.1",
"ag-grid-react": "^6.0.1",
"react": "^15.3.2",

Редактировать (-я):

Я отредактировал gridProps на gridOptions, чтобы лучше проиллюстрировать, что это параметры сетки, которые я даю ag-grid. Похоже, что это было неясно, основываясь на ответе, который велел мне делать именно то, что я заявлял, и не работал.

Добавлена ​​реактивная версия.


ag-grid-react ag-grid
person Jonathan    schedule 26.09.2016    source источник
comment
по-видимому, было найдено исправление для проблемы с github. К сожалению, у меня не было возможности проверить исправление.   -  person Jonathan    schedule 04.11.2016

Ответы (2)


arrow_upward
2
arrow_downward

В 6.x механизм поставки компонентов (Angular 2 или React) был немного упрощен и унифицирован.

Чтобы предоставить компонент в 6.x, используйте следующий синтаксис:

gridOptions.fullWidthCellRendererFramework = AppointmentDetail

Аналогичная идея для остальных средств визуализации (некоторые пользователи colDef.XxxRendererFramework, другие используют gridOptions.xxxxRendererFramework).

См. https://www.ag-grid.com/javascript-grid-cell-rendering/#reactCellRendering для получения дополнительной информации по этому поводу.

person Sean Landsman    schedule 29.09.2016
comment
Хорошо, и это не работает ... это то, что я написал. Мой gridprops по сути совпадает с вашим примером gridOptions, он назван так только потому, что у меня есть оболочка в React вокруг вашего компонента. Думаю, я не сделал этого достаточно очевидным. - person Jonathan; 03.10.2016

arrow_upward
0
arrow_downward

вы используете компонент ag-Grid React?

Я думаю, вы используете ag-Grid в приложении React, но на самом деле не используете компонент React.

вы используете AgGridReact вот так:

<AgGridReact

  // listen for events with React callbacks
  onRowSelected={this.onRowSelected.bind(this)}
  onCellClicked={this.onCellClicked.bind(this)}

  // binding to properties within React State or Props
  showToolPanel={this.state.showToolPanel}
  quickFilterText={this.state.quickFilterText}
  icons={this.state.icons}

  // column definitions and row data are immutable, the grid
  // will update when these lists change
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}

  // or provide props the old way with no binding
  rowSelection="multiple"
  enableSorting="true"
  enableFilter="true"
  rowHeight="22"
/>
person Niall Crosby    schedule 12.10.2016
comment
импортировать {AgGridReact} из 'ag-grid-react'; - person Jonathan; 14.10.2016
comment
поскольку это мой импорт, я предполагаю, что использую правильный компонент. ‹Стиль div = {{height: '100%'}} className = ag-blue› ‹AgGridReact {... gridProps} /› ‹/div› - person Jonathan; 14.10.2016