Web Components Adición de filas de cuadrícula jerárquica

    La función de adición de filas Ignite UI for Web Components en Web Components cuadrícula jerárquica permite a los usuarios ingresar y enviar nuevos registros de datos sin tener que navegar a un formulario o página separados. Con él IgcHierarchicalGridComponent, los usuarios pueden manipular los datos a través de la adición de filas en línea y una potente API para operaciones CRUD. Agregue un IgcActionStrip componente con acciones de edición habilitadas en la plantilla de la cuadrícula. Después de eso, coloque el cursor sobre una fila y use el botón provisto. Finalmente, presione ALT + + para generar la fila que agrega la interfaz de usuario.

    Web Components Ejemplo de adición de filas de cuadrícula jerárquica

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso de adición de filas

    A continuación, defina una fuente de IgcHierarchicalGridComponent datos enlazada, rowEditable establecida en true y un IgcActionStrip componente con acciones de edición habilitadas. La AddRow entrada controla la visibilidad del botón que genera la interfaz de usuario de adición de filas.

    <igc-hierarchical-grid id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true">
        <igc-column field="Artist" data-type="String"></igc-column>
        <igc-column field="HasGrammyAward" header="Has Grammy Award?" data-type="Boolean'">
        </igc-column>
        <igc-column field="Debut" data-type="Number"></igc-column>
        <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="Number"></igc-column>
        <igc-column field="GrammyAwards" header="Grammy Awards" data-type="Number"></igc-column>
    
        <igc-action-strip id="actionstrip1">
            <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
        </igc-action-strip>
    
        <igc-row-island key="Albums" auto-generate="false" primary-key="USBillboard200" row-editable="true">
            <igc-column field="Album" [data-type]="String"></igc-column>
            <igc-column field="LaunchDate" header="Launch Date" data-type="Date"></igc-column>
            <igc-column field="BillboardReview" header="Billboard Review" data-type="Number"></igc-column>
            <igc-column field="USBillboard200" header="US Billboard 200" data-type="Number"></igc-column>
            <igc-row-island key="Songs" auto-generate="false" primary-key="Number" row-editable="true">
                <igc-column field="Number" header="No." data-type="Number"></igc-column>
                <igc-column field="Title" data-type="String"></igc-column>
                <igc-column field="Released" data-type="Date"></igc-column>
                <igc-column field="Genre" data-type="String"></igc-column>
    
                <igc-action-strip id="actionstrip3">
                    <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
                </igc-action-strip>
    
            </igc-row-island>
    
            <igc-action-strip id="actionstrip2">
                <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
            </igc-action-strip>
        </igc-row-island>
    </igc-hierarchical-grid>
    html

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

    Nota: Todas las columnas, excepto la clave principal, se pueden editar en la fila que agrega la interfaz de usuario de forma predeterminada. Si desea deshabilitar la edición de una columna específica, debe establecer la entrada de la columna editable en false.

    Nota: La entrada IgcGridEditingActions que controla la visibilidad del botón Agregar fila puede usar el contexto de la tira de acción (que es de tipo IgcRowType para ajustar qué registros muestra el botón.

    El interno BaseTransactionService se proporciona IgcHierarchicalGridComponent automáticamente. Mantiene los cambios de celda pendientes hasta que se envía o cancela el estado de la fila.

    Ignite UI for Web Components | CTA Banner

    Iniciar fila agregando mediante programación

    IgcHierarchicalGridComponent permite generar mediante programación la interfaz de usuario de agregar fila mediante dos métodos públicos diferentes. Uno que acepta un identificador de fila para especificar la fila en la que debe aparecer la interfaz de usuario y otro que funciona por índice. Puede usar estos métodos para generar la interfaz de usuario en cualquier lugar dentro de la vista de datos actual. No se admite el cambio de página o la especificación de una fila que, por ejemplo, esté filtrada.

    El uso beginAddRowById requiere que especifique la fila que se utilizará como contexto para la operación mediante su RowID (PK). Luego, el método funciona como si el usuario final hiciera clic en el botón agregar fila de acción para la fila especificada, generando la interfaz de usuario debajo de ella. También puede hacer que la interfaz de usuario se genere como la primera fila de la cuadrícula pasando null para el primer parámetro.

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

    El método beginAddRowByIndex funciona de manera similar, pero requiere que especifiques el índice en el que debe generarse la interfaz de usuario. Los valores permitidos oscilan entre 0 y el tamaño de la vista de datos: 1.

    this.grid.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
    this.grid.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
    typescript

    Posicionamiento

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

    • El IgcHierarchicalGridComponent se desplaza para mostrar completamente la interfaz de usuario de agregar fila automáticamente.

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

    Comportamiento

    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.

    Una vez que se agrega una nueva fila a través de la interfaz de usuario de adición de filas, su posición y/o visibilidad viene determinada por el estado de ordenación, filtrado y agrupación de la IgcHierarchicalGridComponent. En un IgcHierarchicalGridComponent que no tiene ninguno de estos estados aplicados, aparece como el último registro. Se muestra brevemente una barra de aperitivos que contiene un botón que el usuario final puede usar para desplazarse IgcHierarchicalGridComponent a su posición si no está a la vista.

    Navegación por teclado

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

    Integración de funciones

    • Cualquier operación de adición de filas se detendrá si se modifica la vista de datos de la IgcHierarchicalGridComponent fila. Se envían todos los cambios realizados por el usuario final. Las operaciones que cambian la vista de datos incluyen, entre otras, la ordenación, la agrupación, el filtrado, la 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 de usuario para el IgcHierarchicalGridComponent, se contrae cualquier diseño secundario expandido actualmente para una fila en la que el usuario final haga clic en el botón Agregar fila.

    Personalizar la superposición de agregar filas

    Personalizando el texto

    Es posible personalizar el texto de la fila agregando superposición usando RowAddTextDirective.

    this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
        return html`Adding Row`;
    }
    ts

    Estilo

    La interfaz de usuario de adición de filas comprende los botones de las IgcActionStrip acciones de edición, los editores de edición y la superposición, así como la barra de aperitivos que permite a los usuarios finales desplazarse a la fila recién agregada. Para aplicar estilo a estos componentes, puede consultar estas guías completas en sus temas respectivos:

    Referencias de API

    Recursos adicionales

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