Agregar filas a la cuadrícula jerárquica React

    La función de Añadir Filas Ignite UI for React en React Hierarchical Grid permite a los usuarios introducir y enviar nuevos registros de datos sin necesidad de navegar a un formulario o página separado. Con estoIgrHierarchicalGrid, los usuarios pueden manipular datos mediante la adición de filas en línea y una potente API para operaciones CRUD. Añade unIgrActionStrip componente con acciones de edición activadas en la plantilla de la cuadrícula. Después de eso, pasa el cursor una fila y usa el botón proporcionado. Por último, pulsa ALT + + para que aparezca la fila añadiendo la interfaz.

    React Hierarchical Grid Row Adding Example

    Row Adding Usage

    Luego define unIgrHierarchicalGrid con la fuente de datos vinculada,rowEditable establecida como true y unIgrActionStrip componente con acciones de edición habilitadas. LaAddRow entrada controla la visibilidad del botón que genera la fila añadiendo la interfaz.

    <IgrHierarchicalGrid autoGenerate={false} data={singersData} id="hGrid" primaryKey="ID" rowEditable={true} ref={hierarchicalGrid1Ref}>
   <IgrActionStrip>
     <IgrGridEditingActions
        addRow={true}>
       </IgrGridEditingActions>
   </IgrActionStrip>
   <IgrColumn field="Artist" header="Artist" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="Debut" header="Debut" dataType="number" minWidth="88px" maxWidth="230px" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="string" resizable={true}>
   </IgrColumn>
   <IgrRowIsland childDataKey="Albums" autoGenerate={false}>
       <IgrColumn field="Album" header="Album" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="LaunchDate" header="Launch Date" dataType="date" resizable={true}>
       </IgrColumn>
       <IgrColumn field="BillboardReview" header="Billboard Review" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrRowIsland childDataKey="Songs" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>
           <IgrColumn field="Number" header="No." dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Title" header="Title" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Released" header="Released" dataType="string" resizable={true}>
           </IgrColumn>
           <IgrColumn field="Genre" header="Genre" dataType="string" resizable={true}>
           </IgrColumn>
       </IgrRowIsland>
   </IgrRowIsland>
   <IgrRowIsland childDataKey="Tours" autoGenerate={false}>
           <IgrActionStrip>
                <IgrGridEditingActions addRow={true}>
                </IgrGridEditingActions>
            </IgrActionStrip>
       <IgrColumn field="Tour" header="Tour" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="StartedOn" header="Started on" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Location" header="Location" dataType="string" resizable={true}>
       </IgrColumn>
       <IgrColumn field="Headliner" header="Headliner" dataType="string" resizable={true}>
       </IgrColumn>
   </IgrRowIsland>
</IgrHierarchicalGrid>

    Nota: La configuración de la clave principal es obligatoria para las operaciones de adición de filas.

    Nota: Cada columna excepto la clave primaria se puede editar en la fila añadiendo la interfaz por defecto. Si quieres desactivar la edición para una columna específica, entonces tienes que configurar laeditable entrada de la columna enfalse.

    Nota: LaIgrGridEditingActions entrada que controla la visibilidad del botón de añadir fila puede usar el contexto de tira de acción (que es del tipoIgrRowType para ajustar qué registro muestra el botón).

    El interiorBaseTransactionService se proporcionaIgrHierarchicalGrid automáticamente. Mantiene los cambios pendientes de celda hasta que se envíe o cancele el estado de la fila.

    Start Row Adding Programmatically

    IgrHierarchicalGridpermite generar programáticamente la interfaz de añadir filas usando dos métodos públicos diferentes. Uno que acepta un ID de fila para especificar la fila bajo la que debe aparecer la interfaz y otro que funciona por índice. Puedes usar estos métodos para generar la interfaz en cualquier lugar dentro de la vista de datos actual. No se permite cambiar la página o especificar una fila que, por ejemplo, esté filtrada.

    UsarbeginAddRowById requiere que especifiques la fila que se va a usar como contexto para la operación por itsRowID (PK). El método entonces funciona como si el usuario final hiciera clic en el botón de añadir la acción de la tira para la fila especificada, generando la interfaz debajo de ella. También puedes hacer que la interfaz aparezca como la primera fila de la cuadrícula pasandonull por el primer parámetro.

    gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record

    ElBeginAddRowByIndex método funciona de forma similar, pero requiere que especifiques el índice en el que debe aparecer la interfaz. Los valores permitidos oscilan entre 0 y el tamaño de la vista de datos - 1.

    gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record

    Positioning

    • La posición predeterminada de la interfaz de usuario para agregar filas está debajo de la fila en la que el usuario final hizo clic en el botón Agregar fila.

    • ElIgrHierarchicalGrid desplazamiento para mostrar completamente la interfaz de añadir fila automáticamente.

    • La superposición de la interfaz de usuario para agregar fila mantiene su posición durante el desplazamiento.

    Behavior

    La interfaz de usuario para agregar filas tiene el mismo comportamiento que la de edición de filas, ya que están diseñadas para brindar una experiencia de edición consistente a los usuarios finales. Consulte el tema Edición de filas de cuadrícula jerárquica para obtener más información.

    Después de añadir una nueva fila a través de la fila añadiendo la interfaz, su posición y/o visibilidad se determina por el estado de ordenación, filtrado y agrupación de laIgrHierarchicalGrid. En unIgrHierarchicalGrid caso que no tenga aplicado ninguno de estos estados, aparece como el último registro. Se muestra brevemente una barra de snacks que contiene un botón que el usuario final puede usar para desplazarloIgrHierarchicalGrid hasta su posición si no está a la vista.

    Keyboard Navigation

    • ALT + +: ingresa al modo de edición para agregar una fila

    • ESC sale del modo de agregar filas sin enviar ningún cambio

    • TAB mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.

    Feature Integration

    • Cualquier operación de suma de filas se detendrá si la vista de datos delIgrHierarchicalGrid se modifica. Cualquier cambio realizado por el usuario final se envía. Las operaciones que cambian la vista de datos incluyen, pero no se limitan a, ordenación, agrupación, filtrado, paginación, etc.

    • Los resúmenes se actualizan una vez finalizada la operación de agregar filas. Lo mismo es válido para otras funciones dependientes de la vista de datos, como ordenar, filtrar, etc.

    • Al generar la interfaz deIgrHierarchicalGrid usuario, cualquier disposición hija que esté expandida para una fila que el usuario final haga clic en el botón de añadir fila se colapsa.

    Customizing Row Adding Overlay

    Customizing Text

    Personalizar el texto de la fila añadiendo superposición es posible usando elrowAddTextTemplate.

    gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return (
        <>
            <span>Adding Row</span>
        </>
    );
}

    Styling

    La interfaz de añadir filas comprende los botones en lasIgrActionStrip acciones de edición, los editores de edición y la superposición, así como la barra de snacks que permite a los usuarios finales desplazarse hasta la fila recién añadida. Para estructurar estos componentes, puedes consultar estas guías completas sobre sus respectivos temas:

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.