Blazor Tree Grid Row Adding

    ProporcionaIgbTreeGrid una forma cómoda de realizar manipulaciones de datos mediante la adición de filas en línea y una potente API para Blazor operaciones CRUD. Añade unIgbActionStrip 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.

    Blazor Tree Grid Row Adding Example

    Row Adding Usage

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

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

    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: LasIgbGridEditingActions 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 tipoIgbRowType para ajustar qué registros muestran los botones).

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

    Start Row Adding Programmatically

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

    @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
}

    ElBeginAddRowByIndex método funciona de forma similar, pero la fila 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
}

    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.

    • ElIgbTreeGrid 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 laIgbTreeGrid. En unIgbTreeGrid 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 desplazarloIgbTreeGrid 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 delIgbTreeGrid 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.

    <IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbTreeGrid>

@code {
    private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
    {
        return @<span>Adding Row</span>;
    };
}

    Customizing Buttons

    Personalizar los botones de la superposición de edición de filas es posible usando laRowEditActions plantilla.

    <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);

    Nota: UsarRowEditActions plantilla cambiará las acciones de edición tanto para editar como para añadir botones de superposición.

    Styling

    La interfaz de añadir filas comprende los botones en lasIgbActionStrip 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.