Блог

Использование editable: true делает все ячейки редактируемыми при двойном щелчке, кроме ячейки группы. Я хочу, чтобы групповая ячейка также была доступна для редактирования.

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

 this.gridApi.startEditingCell({
  rowIndex:0,
  colKey: 'ag-Grid-AutoColumn'
});
  

Вот минимальная версия. В этом я хочу, чтобы групповая ячейка Toyota, Ford, Porsche была доступна для редактирования.

 import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.css";
import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine.css";
import "./styles.css";

import React, { useState } from "react";
import { AgGridColumn, AgGridReact } from "ag-grid-react";
import "ag-grid-enterprise";

export default function App() {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const [rowData, setRowData] = useState([
    { make: "Toyota", model: "Celica", price: 350000 },
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        rowSelection="multiple"
        groupSelectsChildren={true}
        autoGroupColumnDef={{
          headerName: "Model",
          field: "model",
          cellRenderer: "agGroupCellRenderer",
          editable: true,
          cellRendererParams: {
            checkbox: true
          }
        }}
      >
        <AgGridColumn
          field="make"
          sortable={true}
          filter={true}
          checkboxSelection={true}
          rowGroup={true}
          hide={true}
        ></AgGridColumn>
        <AgGridColumn hide={true} field="model"></AgGridColumn>
        <AgGridColumn hide={true} field="price"></AgGridColumn>
      </AgGridReact>
    </div>
  );
}
  

Установите GridOptions.enableGroupEdit true значение, чтобы сделать группы строк редактируемыми

 <AgGridReact
  enableGroupEdit
  autoGroupColumnDef={{
    headerName: "Model",
    field: "model",
    editable: true,
  }}
  onCellEditingStopped={(e) => {
    const { newValue, node, api } = e;
    if (node.group) {
      node.groupData["ag-Grid-AutoColumn"] = newValue;
      api.refreshCells({
        force: true,
        rowNodes: [node]
      });
    }
  }}
  {...}
/>
  

Живая демонстрация