问题标签 [ag-grid-react]

I am able to build the example app of app of AG-Grid. It's running smoothly and is styled nicely.

Then I would like to move it to my app but it seems that the styles are not applied. I put all the example files from https://github.com/ceolter/ag-grid-react-example/tree/master/src to a new folder in my project thus making a component that I use in my app:

My webpack.config is the following:

I am new to react so I may be missing something elementary... Any ideas? I can find myApp.css in the generated bundle. How to make it work?

我正在关注此页面上发布的教程和来源：https ://www.ag-grid.com/javascript-grid-virtual-paging/index.php

在我的组件中，我有相关的代码：

在getRows(params)我调用的方法的数据源中params.successCallback()。然后这些行在网格中可见，但无论我如何滚动getRows都不会再次调用。

我错过了什么？

在我的工作中，我们决定AG-Grid在反应变体中使用：https ://www.ag-grid.com/best-react-data-grid/index.php

目前，我们的架构React是Redux. 据我所知，AG-Grid我可以说它不太适合这种架构。AG-Grid将其整体状态保持在组件内。尝试将它强行完整地连接到redux是很麻烦甚至不聪明的。

我可以忍受，但至少我需要观察行模型的变化——这意味着获取新行、排序、过滤（我不需要观察单元格的变化）。我有两个关于如何观察并将其连接到 redux 的想法。

选项 1 - 使用 gridOptions.onModelUpdated()

我gridOptions.onModelUpdated()知道何时执行过滤或排序，但我无法访问显示的所有行（文档）：

状态 1：行数据

API：没有获取此数据的 API。但是它是由应用程序提供的，因此您应该已经拥有它。

因此我无法调度一个redux动作，因为我没有任何数据来更新它。

选项 2 - datasource.getRows()

我可以用新行调度动作。但是，我还没有发现任何onReset/onRowsDeleted/...事件，因此我不知道何时清除 redux 的state.rows. 更新params我可以知道如果参数为datasource.getRows(params)is ，则先前的行已被清除params.startRow === 0。

问题

也许我找到了一种如何使用这两个选项之一的方法，但我的问题是：

这些是如何连接的好主意AG-Grid吗Redux？

我想在我的大部分专栏中使用 React 中的 cellRenderer。因此，在我的 colDefs 中，我有一个名为 unit 的附加字段。如果该单元存在，我试图在我的 TableCell React 组件中处理一个类似颜色网格的热图。这个相同的反应组件已经在其他数据网格中工作，比如 ZippyUI。cellRenderer 函数可以返回一个 React 组件，它是一个虚拟 DOM 对象，还是必须是一个真正的 HTML DOM 对象？使用 ag-Grid 的 cellRenderer 组件方法做这样的事情会更好吗？

有没有办法设置浮动行的样式，比如 floatCellStyle ？我看到有一个 floatingCellRenderer 但没有专门针对样式。

按照文档中的示例： https ://www.ag-grid.com/best-react-data-grid/index.php

创建新的反应应用程序后（在不同的机器上尝试了几次）

如果我应用样式表（ag-grid.css 和 theme-fresh.css），所有呈现的都是页面上的一条灰线。任何其他组合都会呈现空白页面。删除 ag-grid.css 会渲染网格，但它到处都是混乱的。

最近有没有人在 React 中成功使用过这个？有没有人推荐一些不同的东西？（要求：分页、排序、过滤、可选行）

谢谢 ：-）

我不确定我在这里做错了什么，或者文档是否错误或具有误导性。我正在尝试将 FullWidthRowCell 功能用于每一行的详细信息面板。但是，它似乎并没有像记录的那样完全工作。当我最近从 ag-grid 的 v4 跳到 v6 时，我想我会在这里询问我是否有错误，然后再提交错误报告。

描述：

我更改了现有的数据网格，以便我可能有一个详细信息面板，该面板可以展开以另一种格式显示附加信息。我还想使用我将在其他地方重用的反应组件。目前，面板将打开并仅显示空白区域（面板应位于的位置）并产生错误消息。我在列定义中成功使用了“cellRendererFramework”。

文档参考：

部分：全宽行和主从网格

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

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

部分： React Cell Rendering，指定 React cellRenderer

同样的机制可以在以下位置使用 React 组件：

gridOptions.fullWidthCellRendererFramework是一个指定的选项！

示例设置：

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

网格选项（片段）：

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

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

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

然后整行正确呈现。

警告：

该组件确实向我提供了一个错误，告诉我出了什么问题。只是文档似乎表明这应该是有效的。

版本：以防万一……这是我从 webpack 依赖项中获取的版本。

编辑：

我将 gridProps 编辑为 gridOptions 以更好地说明这些是我给 ag-grid 的网格选项。根据告诉我完全按照我所说的去做和没有工作的回应，这似乎并不清楚。

添加了反应版本。

我正在尝试使用 ag-grid 和 react 使用这个例子
（src-standard）

我是新手。谁能告诉我如何在同一页面上显示两个网格。我是否只是在 myApp.jsx 中进行更改（例如，如果我只想显示相同的网格两次）。

我的问题主要围绕文档中关于反应组件的这个声明：

单元格编辑器参数

onKeyDown回调告诉网格按下了一个键 - 用于将控制键事件（选项卡、箭头等）传递回网格 - 但是您不需要调用它，因为网格已经在监听事件传播时。仅当您要阻止事件传播时才需要这样做。

我知道 cellEditor 参数作为传递给组件的反应版本的道具而存在，但我似乎找不到如何按照文档中的指定附加到onKeyDown 。在我的 cellEditor 的构造函数中，onKeyDown 函数存在并且与列定义中的onKeyDown指定匹配cellEditorParams（如果存在）。

但如果它只是存在于组件中，则永远无法达到

如果我将输入放在onKeyDown={this.props.onKeyDown}顶级包装 div 中，它确实会被调用，但它仍然没有捕捉到“Enter”键。

我尝试收听包含我的自定义单元格编辑器的单元格

哪个确实捕获了输入，但是在我可以捕获字段内的最终输入之前按下输入时它似乎卸载了？我已经看到这也不起作用的行为，所以我很困惑。

我目前有一个简单的单元格编辑器MyCellEditor，除了选项卡之外，我正在尝试在按下 Enter 键时聚焦并选择下一个单元格。我已经有能力从 rowRenderer 中提取我需要的属性，rowIndex然后我会在其中使用，例如：columnthis.props.api.rowRenderer

this.props.api.rowRenderer.moveFocusToNextCell(rowIndex, column, false, false, true);

我的问题是默认情况下从“Enter”按下阻止事件传播的位置。

下面是我的单元格编辑器和用法。

列定义：

反应：

新的反应和农业网格。我正在尝试在我的反应项目中实现一个简单的 ag-grid 示例。当我运行项目时，网格不显示。没有控制台警告，只是网格不显示。