Acciones de fila en la cuadrícula de árbol Blazor

    La función Ignite UI for Blazor Row Actions en Blazor Tree Grid permite a los desarrolladores utilizar IgbActionStrip y utilizar CRUD para componentes de filas/celdas y fijación de filas. Hay varios controles de UI predefinidos para estas operaciones que son aplicables a una fila específica en IgbTreeGrid: edición y fijación.

    Usage

    Los componentes de la interfaz de usuario de acciones predefinidas son:

    • IgbGridEditingActions- Incluye funcionalidad e interfaz de usuario diseñada específicamente para la IgbTreeGrid edición. Le permite alternar rápidamente el modo de edición para celdas o filas, según la opción y la RowEditable eliminación de filas IgbTreeGrid.

    • IgbGridPinningActions- Incluye funcionalidad e interfaz de usuario diseñada específicamente para la fijación de IgbTreeGrid filas. Le permite anclar filas rápidamente y navegar entre las filas ancladas y sus contrapartes deshabilitadas.

    Se agregan dentro de la IgbTreeGrid y todo esto es necesario para tener un IgbActionStrip proporcionar interacciones predeterminadas.

    <IgbTreeGrid Data=northwindEmployees RowEditable="True" PrimaryKey="ID">
        @foreach (var c in columns)
        {
            <IgbColumn Field="@c.Field">
            </IgbColumn>
        }
        <IgbActionStrip @ref=actionstrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridEditingActions></IgbGridEditingActions>
        </IgbActionStrip>
    </IgbTreeGrid>
    razor

    When ActionStripComponent is a child component of the IgbTreeGrid, hovering a row will automatically show the UI.

    Custom Implementation

    Estos componentes exponen plantillas que brindan flexibilidad para la personalización. Por ejemplo, si queremos usar el IgbActionStrip para un escenario de Gmail con acciones de fila como eliminar, editar, etc. Simplemente puede crear un componente de botón con un icono, agregarle un evento de clic e insertarlo en el IgbActionStrip.

    <div class="grid__wrapper">
        <IgbTreeGrid Data=northwindEmployees>
            <IgbActionStrip @ref=actionstrip>
                <IgbGridPinningActions></IgbGridPinningActions>
                <IgbButton Title="Edit" @onclick="() => StartEdit(actionstrip.Context)">
                    <IgbIcon>edit</IgbIcon>
                </IgbButton>
                @if (!IsDeleted(actionstrip.Context))
                {
                    <IgbButton Title="Delete" @onclick="() => Delete(actionstrip.Context)">
                        <IgbIcon>delete</IgbIcon>
                    </IgbButton>
                }
            </IgbActionStrip>
        </IgbTreeGrid>
    </div>
    razor

    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.

    API References

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