¿Cómo puedo establecer la opción predeterminada seleccionada en Ag-Grid React.js?

Answer

1. 

   davy.ai

   June 12, 2023 at 6:41 am

   Para verificar por defecto algunas filas y no verificar otras con checkboxSelection en Ag-Grid, hay algunos enfoques diferentes que puede tomar según sus requisitos específicos:

   1. Use la devolución de llamada getRowNodeId para establecer un identificador único para cada fila en sus datos, y luego use el método gridApi.forEachNode para iterar por las filas y establecer node.setSelected(true) o node.setSelected(false) según el identificador. Aquí hay un ejemplo:

      const rowIdsToCheck = ['row1', 'row5', 'row10']; // Reemplazar con sus propios identificadores de fila
      
      const gridOptions = {
       columnDefs: [{ 
         headerName: '', 
         field: 'checkbox', 
         checkboxSelection: true 
       }],
       rowData: [{ id: 'row1' }, { id: 'row2' }, /* ... */],
       getRowNodeId: data => data.id,
       onGridReady: params => {
         const { api } = params;
         api.forEachNode(node => {
           const rowId = node.data.id;
           if (rowIdsToCheck.includes(rowId)) {
             node.setSelected(true);
           } else {
             node.setSelected(false);
           }
         });
       },
      };
      

   2. Si tiene un número pequeño de filas que verificar, puede usar la propiedad rowClassRules para establecer una clase en cada fila que debe ser verificada, y luego use CSS para estilizar el checkbox. Aquí hay un ejemplo:

      const checkedRowClass = 'my-checked-row';
      const gridOptions = {
       columnDefs: [
         { headerName: '', field: 'checkbox', checkboxSelection: true },
         // ...
       ],
       rowData: [/* ... */],
       rowClassRules: {
         [checkedRowClass]: ({ data }) => data.shouldBeChecked,
       },
      };
      

      .ag-row .ag-selection-checkbox.ag-icon-checkbox-checked {
       /* Estilo para checkbox verificado */
      }
      .ag-row .my-checked-row .ag-selection-checkbox {
       /* Estilo para checkbox no verificado */
      }
      

   3. Use la propiedad defaultSelection para establecer una matriz de datos de fila que deben seleccionarse de manera predeterminada. Aquí hay un ejemplo:

      const defaultSelectedRows = [{ id: 'row1' }, { id: 'row5' }]; // Reemplazar con sus propias filas
      const gridOptions = {
       columnDefs: [/* ... */],
       rowData: [/* ... */],
       defaultColDef: {
         checkboxSelection: true,
         headerCheckboxSelection: false,
       },
       defaultSelection: defaultSelectedRows,
      };
      

   4. Si solo necesita seleccionar algunas filas programáticamente, puede usar el método setSelectedNodes en la API de la cuadrícula. Aquí hay un ejemplo:

      const rowsToSelect = ['row1', 'row5', 'row10']; // Reemplazar con sus propios identificadores de fila
      
      const gridOptions = {
       columnDefs: [{ 
         headerName: '', 
         field: 'checkbox', 
         checkboxSelection: true 
       }],
       rowData: [/* ... */],
       getRowNodeId: data => data.id,
       onGridReady: params => {
         const { api } = params;
         const nodesToSelect = rowsToSelect.map(rowId => api.getRowNode(rowId)).filter(Boolean);
         api.setSelectedNodes(nodesToSelect);
       },
      };
      

Comments are closed.