Ag-grid全宽行似乎不适用于React Components [英] Ag-grid full width rows does not appear to work with React Components

问题描述

我不确定我是在这里做错什么，还是文档是错误的或误导性的。我正在尝试将FullWidthRowCell功能用于每一行的详细信息面板。但是，它似乎不能完全按文档所述工作。当我最近从ag-grid的v4升级到v6时，我想我会在这里提交错误报告之前询问我是否有错。

I am not sure if I am doing something wrong here or if the documentation is wrong or misleading. I am trying to use the FullWidthRowCell feature for detail panels for each row. However, it appears not to completely work as documented. As I recently made the jump from v4 to v6 of ag-grid, I thought I would ask here if I was in error before making a bug report of this.

说明：

我更改了现有的数据网格，因此可能会有一个详细信息面板，该面板可扩展为以其他格式显示其他信息。我还想使用将在其他地方重用的react组件。当前，面板将打开并仅显示空白区域（面板应在该区域）并产生错误消息。我已经在列定义中成功使用了 cellRendererFramework。

I changed an existing data grid so that I would potentially have a details panel that expands out to show additional info in another format. I also wanted to use a react component that I would be reusing elsewhere. Currently, the panel will open and show only a blank area (where the panel should be) and produce an error message. I have used the "cellRendererFramework" successfully in my column definitions.

文档参考：

部分：全宽行主详细信息网格

提供fullWidthCellRenderer，以告诉网格在进行fullWidth渲染时，
使用什么cellRenderer。

Provide a fullWidthCellRenderer, to tell the grid what cellRenderer to use when doing fullWidth rendering.

cellRenderer可以是任何ag-Grid cellRenderer。有关如何构建cellRenderers的信息，请参阅Cell
Rendering。
fullWidth的cellRenderer与普通cellRenderer有一个区别，即传递的
参数缺少值和列信息，因为
cellRenderer根据定义没有绑定到特定的列。
相反，您应该处理data参数，该参数表示整个行的
值。

The cellRenderer can be any ag-Grid cellRenderer. Refer to Cell Rendering on how to build cellRenderers. The cellRenderer for fullWidth has one difference to normal cellRenderers, that is the parameters passed are missing the value and column information as the cellRenderer, by definition, is not tied to a particular column. Instead you should work off the data parameter, which represents the value for the entire row.

部分：反应单元渲染，指定反应单元渲染器

在以下
位置使用React组件：

This same mechanism can be to use a React Component in the following locations:

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

gridOptions.fullWidthCellRendererFramework 是指定选项！

示例设置：

下面是我的设置的一些导入部分（是的，它忽略了col定义和实际版本中的其他内容）。

Below is some of the import parts of my settings (yes its omitting col definitions and other stuff that are in my actual version).

网格选项（摘录） ）：

grid options(snippet):

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
}

一个简单的存根我尝试过的测试组件

A simple stub test component that I tried

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

但是，如果我使用非反应方法

However, if I use non-react method

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

或用于反应组件的旧方法（我认为作者不打算使用该方法）

or the old method for react components (which I thought was not intended by the author to be used anymore)

fullWidthCellRenderer: reactCellRendererFactory(AppointmentDetail)

然后正确显示整行。

警告：

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

，则需要提供fullWidthCellRenderer

该组件确实为我提供了一个错误，告诉我什么地方出错了。

The component does kindly provide me an error that tells me what is wrong. It is just the documentation seems to indicate that this should be valid.

版本：
以防万一，这是我的版本。我的webpack依赖项。

Version: Just in case this is needed... here is my version taken from my webpack dependencies.

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

编辑：

我将gridProps编辑为gridOptions，以更好地说明这些是我为ag-grid提供的网格选项。根据回复，告诉我要完全按照我说的去做和不去做，看来这还不清楚。

I edited gridProps to gridOptions to better illustrate that these are the grid options that I am giving ag-grid. It appears this was not clear, based on the response that told me to do exactly what I stated I did and did not work.

添加了react版本。

Added react version.

推荐答案

在6.x中，对组件（Angular 2或React组件）的供应机制进行了一些简化和统一。

In 6.x the mechanism to supply components (either Angular 2 or React ones) was simplified a bit, and unified.

要在6.x中提供组件，请使用以下语法：

To supply a component in 6.x use the following syntax:

gridOptions.fullWidthCellRendererFramework = AppointmentDetail

对于其他渲染器（有些用户colDef.XxxRendererFramework，它的想法与此类似）使用gridOptions.xxxxRendererFramework。）。

Its a similar idea for the rest of the renderers (some user colDef.XxxRendererFramework, others use gridOptions.xxxxRendererFramework).

请参见 https://www.ag-grid.com/javascript-grid-cell-rendering/#reactCellRendering 有关此的更多信息

See https://www.ag-grid.com/javascript-grid-cell-rendering/#reactCellRendering for more information around this

这篇关于Ag-grid全宽行似乎不适用于React Components的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！