Редактируемая групповая ячейка в сетке ag

Использование 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>
  );
}

javascript ag-grid-react ag-grid
person ranjeet8082    schedule 01.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Установите 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]
      });
    }
  }}
  {...}
/>

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

Отредактируйте 64151825 / editable-group-cell-in-ag-grid / 64153055 # 64153055

person NearHuscarl    schedule 01.10.2020
comment
Новое значение не сохраняется в ячейке после завершения редактирования. - person ranjeet8082; 01.10.2020
comment
@ ranjeet8082 tbh, я не уверен, почему не обновляется группа строк. Вы можете войти в onCellEditingStopped, чтобы убедиться, что событие действительно срабатывает, но вам нужно вручную обновить группу строк. Также нет документации по enableGroupEdit, за исключением того, что он кратко упоминается в этом журнал изменений - person NearHuscarl; 01.10.2020