问题标签 [ag-grid-react]

将 ag-grid 与异步数据一起使用时，文档建议调用该api.setRowData(data)方法。

问题是api只有在gridReady事件触发后才准备好。

所以我有一个竞争条件，为了解决我需要在gridReady事件中获取数据，这会导致不必要的延迟。

这是唯一的选择吗？

我有以下列定义

它使用的 Cell 渲染器就是这个

我想要做的是让这个列成为一种在排序时对其他列进行排名的方法。因此，我希望此列始终以 1 开头并转到 N。我面临的问题是，当我对其他任何列进行排序时，此 Rank 列也会发生变化。有没有办法“锁定”列，使数据永远不会移动？

我正在使用带有 React 的 ag-grid，这是我目前要导出到 CSV 的代码：

如果我在 Ag-Grid 中隐藏某些列，它们不会出现在 CSV 中。有没有办法隐藏网站上的列，但让它们以 CSV 显示？

或者，如果我将这些列中的数据转换为工具提示，它们可以包含在 CSV 中吗？

使用带有 react 和 typescript 的 ag-grid，我有一个定义为可编辑的列，它使用来自 GraphQL 查询的数据（保持状态）进行初始化。

编辑单元格时出现以下错误： TypeError: Cannot assign to read only property 'destination' of object '#'

它落在的代码是 ValueService../node_modules/ag-grid/dist/lib/valueService/valueService.js.ValueService.setValue

有谁知道它试图在哪里存储更改的值以及为什么会发生这种情况？

代码片段：

我的问题是我的网格根本不会保持响应，或者如果我尝试创建一个没有那么多列的网格，整个网格看起来就很奇怪。我想让它伸展到它的容器宽度。这是我期望 sizeColumsToFit 做的。我收到警告：ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?但我该如何解决这个问题。例如，我从减速器加载数据，因此会发生重新渲染，或者当我的数据处于获取状态时，我有一个加载微调器。你们采取什么模式来解决这个问题？

这是一个例子：

这是我的渲染方法：

编辑：我怀疑发生了所有事情，网格合法不知道 onGridReady 中的宽度，因为 dom 尚未完成加载，但是其他所有内容都已初始化。如果我这样做：setTimeout(() => this.gridApi.sizeColumnsToFit(), 500);在 onGridReady(params) {...} 中它会起作用，但会有延迟，并且并非每个人的浏览器都以相同的速度运行。处理这个的任何范例？

我试图在 ag 网格中突出显示鼠标悬停的一行。我正在使用 React 框架。React 单元格样式示例都与条件渲染样式相关，但没有一个专注于鼠标悬停样式。我关注的链接是链接

我还检查了他们提到使用 ag-row-hover 类的github上的答案。我应该在哪里渲染这个 css 类？

我想让一个单元格根据props.data与该行绑定的对象中可用的其他数据以某种方式呈现。但是我不知道当其他数据发生变化时如何让单元格重新渲染。

我有一个非常简单的数据结构，我试图在 ag-grid 中显示，基本上是一个属性数组，每个都有一个名称、一个值和一个 isLoading 标志，指示属性是否正在更新（如后台刷新可能发生，网格单元格中的数据是只读的）。

我希望网格显示名称和值列，并且我希望值列显示微调器图标 if isLoading == true。
我正在尝试为此构建一个自定义单元格渲染器，但该单元格仅在值更改时重新渲染，而不是在 isLoading 标志更改时重新渲染。

在我的代码流程中，isLoading 标志设置为 true，然后更新值。这会触发渲染方法，单元格现在将显示更新的值和加载微调器。然后将 isLoading 标志设置为 false，但不会再次调用 render 方法，因此单元格继续显示加载微调器。

所以我的问题是，我怎样才能让 cellrenderer 响应props.data那些不是它所显示值的字段的变化？props.data.isLoading在这种情况下，我需要在标志更改时重新渲染单元格。

我正在使用带有 react 和 redux 的 ag-grid v17（并尝试打字稿）。
我的代码看起来与此处的示例非常相似： https ://www.ag-grid.com/react-redux-integration-pt1/

我的单元格渲染器是从本示例中的货币渲染器构建的： https ://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-react-components

注意：我将网格的 deltaRowDataMode 设置为 true，因此它只是重新渲染已更改的数据。

这是我的列定义：

这是我的单元格渲染器：

这也可以使用单元格类或样式，但我也希望能够以类似的方式处理其他事情，例如使用带有按钮的单元格渲染器，并在 isLoading 为时禁用该按钮真的。

更新：
在这里添加了一个工作示例： https ://react-owixbq.stackblitz.io/

我正在尝试模拟 DOM 事件以测试 React 组件。该组件内部使用 ag-grid-react。

我想用 ag-grid-react 模拟行交互事件，例如“行选择”、“行 dblclick”，并且事件应该像真正的 DOM 事件，它具有 DOM 中该事件的所有效果。

请为此提出任何想法。

谢谢你。

我有一个围绕AgGridReact的包装器组件AgGridWrapper（AgGridReact 是一个有助于创建 HTML 网格的节点模块）。在此示例中，当我单击 AgGrid 上的任何单元格时，它将更改单元格的值。

我想测试这个 onCellClicked 事件。所以我做了以下。

我的目的是模拟 cellClicked 事件并检查单元格的值是否已更改。但是在这里我无法访问 agGridReact 的setDataValue()方法。所以我无法模拟这个eventObject。

我被困在这里几天了。我的印象是，它在技术上无法测试此功能，因为我们无法访问setDataValue 。

对此有何建议？？

如何检查在特定情况下触发了哪些 React 事件？

我正在开发一个在内部使用 Ag 网格反应的反应组件。Ag Grid React 有像rowDataChanged,之类的事件rowDataUpdated。在调试时，我很想知道触发了哪些 Ag Grid 事件。

在 Chrome 中可以吗？或者有没有其他工具可以检查这个？