Row Actions in Blazor Grid

    La función Ignite UI for Blazor Row Actions en Blazor Grid permite a los desarrolladores usar 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 IgbGrid: edición y fijación.

    Uso

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

    • IgbGridEditingActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la edición IgbGrid. Le permite alternar rápidamente el modo de edición para celdas o filas, según la opción RowEditable y la eliminación de filas de IgbGrid.

    • IgbGridPinningActions: incluye funcionalidad y interfaz de usuario diseñadas específicamente para la fijación de filas IgbGrid. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.

    Se agregan dentro de IgbGrid y todo esto es necesario para tener un IgbActionStrip que proporcione interacciones predeterminadas.

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

    Cuando ActionStripComponent es un componente secundario de IgbGrid, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.

    Implementación personalizada

    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">
        <IgbGrid 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>
        </IgbGrid>
    </div>
    razor

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

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

    Referencias de API

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