Can someone verify my understanding of: Grid?

[krishna_jpParticipant]

How do I enable row editing and save changes back to my React state when using jqxGrid?

[adminKeymaster]

Hi,

You can try this:

import React, { useState, useMemo } from 'react';
import JqxGrid from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import jqx from 'jqwidgets-scripts/jqwidgets/jqxcore';

const MyGrid = () => {
  const [gridData, setGridData] = useState([
    { id: 1, name: 'Product A', price: 100 },
    { id: 2, name: 'Product B', price: 200 }
  ]);

  const source = useMemo(() => ({
    datatype: 'array',
    datafields: [
      { name: 'id', type: 'number' },
      { name: 'name', type: 'string' },
      { name: 'price', type: 'number' }
    ],
    localdata: gridData
  }), [gridData]);

  const dataAdapter = useMemo(() => {
    return new jqx.dataAdapter(source);
  }, [source]);

  const columns = [
    { text: 'ID', datafield: 'id', editable: false, width: 100 },
    { text: 'Name', datafield: 'name', width: 200 },
    { text: 'Price', datafield: 'price', cellsformat: 'c2' }
  ];

  const handleRowEndEdit = (event) => {
    const { rowindex, row } = event.args;

    setGridData(prevData => {
      const updated = [...prevData];
      updated[rowindex] = row;
      return updated;
    });
  };

  return (
    <JqxGrid
      width={'100%'}
      source={dataAdapter}
      columns={columns}
      editable={true}
      editmode={'row'}
      onRowendedit={handleRowEndEdit}
    />
  );
};

export default MyGrid;

Best regards,
Peter

[Author]

Posts