Add rows via input AgGrid React

user_14436483 0
Viewed 376

Anyone know how to add multiple rows to the AgGrid via an input?

I have a pop up input where I can type the number of rows I wish to add. I have used console.log to get the number from the input.

form.js

import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [Number, setNumber] = useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setNumber(event.target.value);
    console.log(Number)
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Number:
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="num"
            label="Number"
            fullWidth
            variant="standard"
            onChange={handleChange}
            value={Number}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose}>Add</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Then I have my aggrid.js where I have imported the FormDialog function. I call the form function. Currently have this functionality to add new row

onAddRow = () => {
      
    this.gridApi.updateRowData({
      add: [{FirstName: "", LastName:"", Town:""}]
      });
  }

I'm not sure how to add the required rows based on what I have inputted in the form

ag-grid-react ag-grid reactjs
1 Answers

You can use:

GridApi.applyTransaction({ add: [...] })

To add multiple rows in AgGrid where the array is the row data. Below is an example:

function FormDialog({ onAdd }) {
  const [open, setOpen] = React.useState(false);
  const [number, setNumber] = React.useState(null);
  const handleClose = () => setOpen(false);
  const handleAdd = () => {
    onAdd(number);
    handleClose();
  };

  return (
    <div>
      <Button variant="outlined" onClick={() => setOpen(true)}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>Number:</DialogContentText>
          <TextField
            onChange={(e) => setNumber(e.target.value)}
            value={number}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleAdd}>Add</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

<FormDialog
  onAdd={(n) => {
    gridApi.applyTransaction({
      add: [...Array(Number(n)).keys()].map((i) => ({
        firstName: 'first name',
        lastName: 'last name',
        town: 'town',
      }))
    });
  }}
/>

Codesandbox Demo

Reference

user_94494260
Related