Row Actions in Blazor Grid

    The Ignite UI for Blazor Row Actions feature in Blazor Grid enables developers to use an IgbActionStrip and utilize CRUD for row/cell components and row pinning. There are several predefined UI controls for these operations that are applicable to a specific row in the IgbGrid – editing and pinning.

    Usage

    Os componentes de interface do usuário de ações predefinidas são:

    • IgbGridEditingActions- inclui funcionalidades e interface especificamente projetadas para aIgbGrid edição. Ele permite que você alterne rapidamente o modo de edição para células ou linhas, dependendo daRowEditable opção e da exclusão deIgbGrid linhas.

    • IgbGridPinningActions- inclui funcionalidades e interface especificamente projetadas para oIgbGrid fixamento de linhas. Ele permite que você rapidamente fixe as linhas e navegue entre as fileiras fixadas e suas contrapartes desativadas.

    Eles são adicionados dentro doIgbGrid e tudo isso é necessário para fornecerIgbActionStrip interações padrão.

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

    [!Note] When ActionStripComponent is a child component of the IgbGrid, hovering a row will automatically show the UI.

    Custom Implementation

    Esses componentes expõem modelos que oferecem flexibilidade para personalização. Por exemplo, se quisermos usar oIgbActionStrip para um cenário do Gmail com ações de linha como excluir, editar, etc. Você pode simplesmente criar um componente de botão com ícone, adicionar um evento de clique e inseri-lo neleIgbActionStrip.

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

    API References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.