标签: ag-grid-react

我将 rowData 和 columnDefs 作为 props 传递。网格正在正确加载。但是，当数据更改时，网格不会重新渲染。它来到父组件的渲染中，并传递给AgGridReact。但是，仍然没有重新渲染。

由于它是一个完整的React应用程序，因此我在https://github.com/jintoppy/ag-grid-upgrade中添加了代码

主要代码如下。

<AgGridReact
        // properties
         columnDefs={this.state.columnDefs}
         rowData={this.props.data}

         // events
         onGridReady={this.onGridReady}>
</AgGridReact>

在 React 中，基于文档 [here][1]，我试图选择一个 AG Grid 行以使用以下代码删除：

    class MyComponent extends Component {
      constructor(props) {
        this.state={rowSelection: 'single'}
      }

      onGridReady(params) {
        this.gridApi = params.api
        this.columnApi = params.columnApi
      }

      onRemoveSelected() {
        const selectedData = this.gridApi.getSelectedRows();
        const res = this.gridApi.updateRowData({ remove: selectedData })
      }
    }

    render() {
      return(
        <div>
          <button onClick={this.onRemoveSelected.bind(this)}>Remove Selected</button>
          <AgGridReact
            id="myGrid"
            {...gridOptions}
            onGridReady={this.onGridReady}
            rowSelection={this.state.rowSelection}
           />
          </div>
      )
    }

但该行没有选择。此外，使用不同的代码变体，有时我会收到此控制台警告：

cannot select node until id for node is known 

提前致谢 [1]：https : //www.ag-grid.com/javascript-grid-data-update/

在此示例中，单击日期可以对其进行编辑，但如果您使用选项“stopEditingWhenGridLosesFocus”，则日期选择器将不再工作。有可能解决这个问题吗？

<AgGridReact
   stopEditingWhenGridLosesFocus // without this line works fine
   columnDefs={this.state.columnDefs}
   components={this.state.components}
   onGridReady={this.onGridReady.bind(this)}
   rowData={this.state.rowData}
 />

我需要在 ag-grid 中将选择颜色从蓝色（默认颜色）更改为红色边框蓝色。

请参阅图片蓝色应转换为带有红色边框的深蓝色

我有这个简单的专栏：

这是它的定义：

{
      headerName: "Activité",
      field: "activite",
      editable: true,
       , cellClass: "cell-wrap-text"
      }  

这是每次用户在该列中输入新输入时我想启动的方法。

  public UpdateActValue() {
      this.data.sendActToBia(this.params.data.activite);
      }  

以下是我的问题：
1/ 在编辑列中的单元格值后，是否有任何 ag-grid“本机”方式来启动特定方法？
2/ 我应该简单地定义一个自定义单元格渲染器并在那里完成所有必要的工作吗？
谢谢！

我在我的项目中使用 ag-grid 并且我在应用表状态时遇到问题。这是我的onGridReady函数代码片段：

 this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    if (!window.colState) {
        console.log("no columns state to restore by, you must save state first");
    } else {
        this.gridColumnApi.applyColumnState({
            state: window.colState,
            applyOrder: true,
        });
        console.log("column state restored");
    }

它当然取自 ag-grid。就在它下面，我拥有 this.gridColumnApi.getAllColumns() 和this.gridColumnApi.autoSizeColumns() 运行良好的功能。

问题是this.gridColumnApi.applyColumnState给了我这个错误。

TypeError: _this.gridColumnApi.applyColumnState is not a function

我不明白为什么调用的其他函数this.gridColumnApi有效但applyColumnState没有。有什么建议？

@edit 我什至尝试过这个：

componentWillUnmount() {
    window.colState = this.props.gridColumnApi.getColumnState();
    console.log("column state saved");
    if (this.props.gridColumnApi.applyColumnState) {
        devLog("IT IS HERE");
    } else {
        devLog("its not");
    } …

尝试使用 React 实现自定义单元框架渲染器，看起来很简单。创建 React 组件，将其注册到frameworkComponents.

填充的数据rowData来自我的 redux 存储。自定义单元格渲染器是一个功能性反应组件。

问题是，因为我使用的是frameworkComponent（在我的例子中是React组件）作为cellRenderer，所以似乎我通过获取的网格数据的任何变化都会useSelector(selectorForMyData)导致我的frameworkComponent的重新渲染，这在浏览器上，看起来像是随机的、烦人的闪烁。该应用程序大量连接到 redux

两个问题：

1 - 为什么当我本机使用 ag grid 使用AgGridColumn没有任何自定义单元格渲染器的方式渲染此单元格时，它不会导致同一商店更改时的重新渲染行为？我有一个绑定到主页的点击事件，该事件将标志切换为 false（在小吃栏警报打开的情况下）。

2 - 有什么办法可以解决这个问题吗？我尝试将我的return语句包装在框架单元渲染器组件中，并将其useMemo作为params依赖项，但这似乎不起作用。还尝试使用与以下相同的想法创建一个render函数，但这也没有帮助：/useCallbackuseMemo

谢谢

情况的伪代码：

App.tsx:

<MyAgGrid/>

MyAgrid.tsx:


const MyAgGrid = () => {
 const data = useSelector(selectorForData);
 return (
   <AgGridReact
     rowData={data}
     frameworkComponents={
       {'myCustomRenderer': CustomRendererComponent}
     }
     columnDefs={
       ['field': 'aField', cellRenderer: 'myCustomRenderer']
     } />
   );
};


CustomCellRendererComponent.tsx:

const CustomCellRendererComponent = (params) => {
  console.log("params", params) …

我试图将react-date picker与ag-grid合并 ag-grid提供了有关使用自定义日期选择器的文档，但使用 flatpickr 想知道是否有人成功尝试将react-datepicker与ag-grid结合使用，如果是这样，可以提供和示例？

农业网格示例：https ://www.ag-grid.com/javascript-grid/component-date/

当我尝试使用单元格渲染来渲染自定义元素时，

这是我的组件：Action.jsx

import React from 'react';

export default (props) => (
    <div>
        <button
            class="action-button cancel">
            cancel
        </button>
    </div>
);

这是我的网格选项和导入：

import AcRenderer from './Action.jsx'
...
const gridOptions = {
    rowData: renderdata(),
    columnDefs: [
      {
        headerName: "action",
        cellRenderer: AcRenderer,
        editable: false,
        colId: "action",
        filter: false,
        minWidth: 220
      }
    ],

但我不断收到此错误：

” Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.“

有谁知道为什么？

非常感谢！

我正在尝试使用 getSortModel() 从 ag-grid-react 组件获取排序模型，但我得到 getSortModel 不是一个函数

我的代码

 onSortChanged={useCallback(e => console.log(e.api.getSortModel(), 'im from sort'))}

"@ag-grid-community/react": "27.3.0", "@ag-grid-enterprise/all-modules": "27.3.0",