Blazor Tree Grid Row Adding

    IgbTreeGrid ofrece una forma conveniente de realizar manipulaciones de datos mediante la adición de filas en línea y una API potente para operaciones CRUD Blazor. Agregue un componente IgbActionStrip con acciones de edición habilitadas en la plantilla de la cuadrícula, pase el cursor sobre una fila y use el botón provisto, presione ALT + + para generar la interfaz de usuario para agregar filas o ALT + SHIFT + + para generar la interfaz de usuario para agregar un elemento secundario para la fila seleccionada.

    Blazor Tree Grid Row Adding Example

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Row Adding Usage

    A continuación, defina una fuente de IgbTreeGrid datos enlazada, RowEditable establecida en true y un IgbActionStrip componente con las acciones de edición habilitadas. La AddRow entrada controla la visibilidad del botón que genera la fila que agrega la interfaz de usuario.

    <IgbTreeGrid AutoGenerate="false" Id="treegrid" PrimaryKey="ID" ForeignKey="ParentID" RowEditable="true">
        <IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="Title" Header="Title" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="HireDate" Header="Hire Date" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumn Field="OnPTO" Header="On PTO" DataType="GridColumnDataType.Boolean"></IgbColumn>
    
        <IgbActionStrip>
            <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
        </IgbActionStrip>
    </IgbTreeGrid>
    razor

    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: Las IgbGridEditingActions entradas que controlan la visibilidad de los botones Agregar fila y Agregar elementos secundarios pueden usar el contexto de la tira de acciones (que es de tipo IgbRowType para ajustar los registros para los que se muestran los botones.

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

    Start Row Adding Programmatically

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

    @code {
        await this.treeGrid.BeginAddRowByIdAsync('ALFKI', true);  // Spawns the add row UI to add a child for the row with PK 'ALFKI'
        await this.treeGrid.BeginAddRowByIdAsync(null, false);     // Spawns the add row UI as the first record
    }
    razor

    El BeginAddRowByIndex método funciona de manera similar, pero la fila que se va a usar como contexto se especifica mediante el índice.

    @code {
        await this.treeGrid.BeginAddRowByIndexAsync(10, true);   // Spawns the add row UI to add a child for the row at index 10
        await this.treeGrid.BeginAddRowByIndexAsync(0);    // Spawns the add row UI as the first record
    }
    razor

    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.

    • The IgbTreeGrid scrolls to fully display the add row UI automatically.

    • 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 agregar 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 IgbTreeGrid. En un IgbTreeGrid que no tiene ninguno de estos estados aplicados, aparece como el último registro. Se muestra brevemente una barra de bocadillos que contiene un botón que el usuario final puede usar para desplazarse IgbTreeGrid a 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 adición de filas se detendrá si se modifica la vista de datos de la IgbTreeGrid fila. Se envían todos los cambios realizados por el usuario final. Las operaciones que cambian la vista de datos incluyen, entre otras, ordenar, agrupar, filtrar, paginar, 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

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

    <IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
    </IgbTreeGrid>
    
    @code {
        private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
        {
            return @<span>Adding Row</span>;
        };
    }
    razor

    Customizing Buttons

    Es posible personalizar los botones de la superposición de edición de filas utilizando la plantilla RowEditActions.

    <IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
    </IgbTreeGrid>
    
    //In JavaScript:
    igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
        var html = window.igTemplating.html;
        return html`<div class="row-actions">
            <button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
            <button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
        </div>`
    }, false);
    razor

    Nota: El uso de la plantilla RowEditActions cambiará las acciones de edición tanto para editar como para agregar botones superpuestos.

    Styling

    La interfaz de usuario para agregar filas comprende los botones en las acciones de edición IgbActionStrip, los editores de edición y la superposición, así como la barra de bocadillos que permite a los usuarios finales desplazarse a la fila recién agregada. Para diseñar estos componentes, puede consultar estas guías completas en sus respectivos temas:

    API References

    Additional Resources

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