React Tree Grid Row Adding

    ProporcionaIgrTreeGrid una forma cómoda de realizar manipulaciones de datos mediante la adición de filas en línea y una potente API para React operaciones CRUD. Añade unIgrActionStrip componente con acciones de edición activadas en la plantilla de la cuadrícula, pasa el cursor por una fila y usa el botón proporcionado, pulsa ALT + + para generar la fila que añade la interfaz de usuario o ALT + SHIFT​ ​+ +para generar la interfaz para añadir un hijo para la fila seleccionada.

    React Tree Grid Row Adding Example

    Row Adding Usage

    Luego define unIgrTreeGrid 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.

    <IgrTreeGrid autoGenerate={false} primaryKey="ID" foreignKey="ParentID" rowEditable={true}>
    <IgrColumn field="Name" header="Name" dataType="string"></IgrColumn>
    <IgrColumn field="Title" header="Title" dataType="string"></IgrColumn>
    <IgrColumn field="HireDate" header="Hire Date" dataType="date"></IgrColumn>
    <IgrColumn field="OnPTO" header="On PTO" dataType="boolean"></IgrColumn>

    <IgrActionStrip>
        <IgrGridEditingActions addRow={true}></IgrGridEditingActions>
    </IgrActionStrip>
</IgrTreeGrid>

    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: LasIgrGridEditingActions entradas que controlan la visibilidad de los botones de añadir fila y añadir hijos pueden usar el contexto de tira de acción (que es del tipoIgrRowType para ajustar qué registros muestran los botones).

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

    Start Row Adding Programmatically

    IgrTreeGridpermite 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. El segundo parámetro controla si la fila se añade como hijo a la fila de contexto o como hermana. También puedes hacer que la interfaz aparezca como la primera fila de la cuadrícula pasandonull por el primer parámetro.

    this.treeGrid.beginAddRowById('ALFKI', true);   // Spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null);            // Spawns the add row UI as the first record

    ElbeginAddRowByIndex método funciona de forma similar, pero la fila a usar como contexto se especifica mediante el índice.

    this.treeGrid.beginAddRowByIndex(10, true);   // Spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);       // 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.

    • ElIgrTreeGrid 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 la cuadrícula de árbol 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 laIgrTreeGrid. En unIgrTreeGrid 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 desplazarloIgrTreeGrid hasta su posición si no está a la vista.

    Keyboard Navigation

    • ALT + +: ingresa al modo de edición para agregar una fila
    • ALT + SHIFT + + - Enters edit mode for adding a child

    • 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 delIgrTreeGrid 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.

    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.