React Grid Row Adding

    The Ignite UI for React Row Adding feature in React Grid enables users to input and submit new data records without navigating to a separate form or page. With the IgrGrid, users can manipulate data through inline row adding and a powerful API for CRUD operations. Add an IgrActionStrip component with editing actions enabled in the grid's template. After that hover a row and use the provided button. Finally press ALT + + to spawn the row adding UI.

    React Grid Row Adding Example

    Row Adding Usage

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

    <IgrGrid autoGenerate={false} data={NwindData} primaryKey="ProductID" rowEditable={true}>
    <IgrColumn field="ProductID" header="Product ID" dataType="number"></IgrColumn>
    <IgrColumn field="ReorderLevel" header="Reorder Level" dataType="number"></IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" dataType="string"></IgrColumn>
    <IgrColumn field="UnitsInStock" header="Units In Stock" dataType="number"></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="date"></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>

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

    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 proporcionagrid automáticamente. Mantiene los cambios pendientes de celda hasta que se envíe o cancele el estado de la fila.

    Start Row Adding Programmatically

    gridpermite 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.

    • Elgrid 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 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 lagrid. En ungrid 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 desplazarlogrid 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 delgrid 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.