Forums Ignite UI for React
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Gangeswaran KANNAN
30
Problem with create a new Row in React Grid
posted

Hi,

I'm trying to create a Crud Grid in React in my case grid edit working fine but when i try to create a new row insert, not working with console errors: 
hook.js:608 ERROR be2: NG02100 at Wp (192.168.1.38:2000/.../chunk-FWF2KR2N.js

installed versions:

"igniteui-react": "^18.6.0",
"igniteui-react-grids": "^18.6.0",


code snippet for your reference:
 const gridRef = useRef();
  const dataProvider = useDataProvider();

  // Handle row editing completion
  function rowEditActionsTemplate(ctx) {
    const endRowEdit = ctx.dataContext.implicit;
    const rowData = ctx.dataContext;
    console.log("rowData -->", rowData);
    return (
      <>
        <button onClick={(event) => endRowEdit(false, event)}>Cancel</button>
        <button
          onClick={(event) => {
            console.log("event -->", event);
            endRowEdit(true, event);
          }}
        >
          Apply
        </button>
      </>
    );
  }

  // Row edit completion event (update existing rows)
  const webGridRowEditDone = (sender, args) => {
    const updatedData = args.detail.rowData; // Get the updated row data
    console.log(`Row edited with data: ${JSON.stringify(updatedData)}`)
  };

  // Row added event (create new row)
  const webGridRowAddedDone = (sender, args) => {
    let newRowData = args.detail.data;
    console.log("newRowData before add -->", newRowData);
  }
<IgrGrid
      autoGenerate="false"
      ref={gridRef}
      id="grid"
      data={data}
      primaryKey="id"
      rowEditable="true"
      style={{ height: "630px" }}
      moving="true"
      allowAdvancedFiltering="true"
      rowEditActionsTemplate={rowEditActionsTemplate}
      rowEditDone={webGridRowEditDone}
      rowAdded={webGridRowAddedDone} // Register the rowAdded event
      className="grid"
    >
      <IgrActionStrip>
        <IgrGridEditingActions addRow="true" />
      </IgrActionStrip>
      <IgrPaginator perPage="10" />
      <IgrColumn
        field="id"
        header="ID"
        dataType="Number"
        sortable="true"
        editable="false"
      ></IgrColumn>
      <IgrColumn
        field="MID"
        header="Member ID"
        dataType="Number"
        sortable="true"
        editable="true"
      ></IgrColumn>
      <IgrColumn
        field="AID"
        header="Account ID"
        dataType="Number"
        sortable="true"
        editable="true"
      ></IgrColumn>
      <IgrColumn
        field="TL"
        header="Title"
        dataType="String"
        sortable="true"
        editable="true"
      ></IgrColumn>
      <IgrColumn
        field="FN"
        header="First name"
        dataType="String"
        sortable="true"
        editable="true"
      ></IgrColumn>
      <IgrColumn
        field="LN"
        header="Last name"
        dataType="String"
        sortable="true"
        editable="true"
      ></IgrColumn>
    </IgrGrid>


can you share any reference grid in react functional component