Cómo actualizar la fila al hacer clic en un botón en ag grid en React.

Answer

1. 

   davy.ai

   July 19, 2023 at 1:39 pm

   Para actualizar una fila en AG Grid, primero debes seleccionar la fila que deseas actualizar y luego crear un componente de editor que te permitirá cambiar los valores de esa fila. Una vez que hayas cambiado los valores, necesitas guardarlos de vuelta en la fila.

   Aquí te explicamos cómo puedes hacerlo:

   1. Cambia el botón en el renderizador de celda por un icono o botón que abrirá el componente de editor.
   2. Crea un componente de editor que se mostrará cuando se haga clic en el ícono o botón.
   3. Dentro del componente de editor, necesitas poblar los valores actuales de la fila que deseas actualizar.
   4. Cuando hayas realizado tus cambios en el componente de editor, necesitas guardarlos de vuelta en la fila utilizando el método api.applyTransaction().

   Aquí tienes un ejemplo de código que muestra cómo implementar la funcionalidad de actualización:

   function Read(props) {
     const [record, setRecord] = useState('');
   
     useEffect(() => {
       axios.get('https://jsonplaceholder.typicode.com/comments')
         .then((response) => {
           console.log(response.data);
           setRecord(response.data);
         })
     }, [])
   
     const col = [
       { headerName: "Nombre", field: "name" },
       { headerName: "Correo electrónico", field: "email" },
       { headerName: "Cuerpo", field: "body" },
       {
         headerName: "",
         headerClass: 'new-class',
         cellRendererFramework: (params) =>
           <div>
             <button onclick="{()" ==""> update(params.data)}>Editar</button>
           </div>
       }
     ]
   
     const [selectedRow, setSelectedRow] = useState(null);
   
     const update = (data) => {
       setSelectedRow(data);
     }
   
     const closeEditor = () => {
       setSelectedRow(null);
     }
   
     const saveChanges = (newData) => {
       const index = record.findIndex(r => r.id === newData.id);
       const updatedData = [...record];
       updatedData[index] = newData;
   
       setRecord(updatedData);
       closeEditor();
     }
   
     return (
       <>
         <div classname="ag-theme-alpine" style="{{" height:="" '400px',="" width:="" '700px'="" }}="">
           <aggridreact columndefs="{col}" rowdata="{record}">
           </aggridreact>
         </div>
   
         {selectedRow && (
           <editcomponent data="{selectedRow}" savechanges="{saveChanges}" closeeditor="{closeEditor}"></editcomponent>
         )}
   
     );
   }
   

   En este ejemplo, hemos agregado una nueva variable de estado llamada selectedRow que almacenará la fila que queremos actualizar. También hemos creado dos nuevas funciones: closeEditor y saveChanges.

   La función closeEditor cerrará el componente de editor cuando se haya completado la actualización. La función saveChanges tomará los datos actualizados de la fila y los actualizará en la variable de estado record.

   También hemos agregado un nuevo componente llamado EditComponent que se utilizará como editor para actualizar los datos de la fila. Este componente recibirá los datos de la fila a actualizar, la función saveChanges para guardar los cambios y la función closeEditor para cerrar el componente de editor.

   Deberás implementar el EditComponent por separado para manejar la funcionalidad de edición.

Comments are closed.