Ações de linha na grade Blazor árvore

    O recurso Ignite UI for Blazor Ações de Linha na Grade de Árvore Blazor permite que os desenvolvedores usem e utilizem um IgbActionStrip CRUD para componentes de linha/célula e fixação de linha. Existem vários controles de interface do usuário predefinidos para essas operações que são aplicáveis a uma linha específica na IgbTreeGrid edição e fixação.

    Usage

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

    • IgbGridEditingActions- inclui funcionalidade e interface do usuário projetada especificamente para a IgbTreeGrid edição. Ele permite que você alterne rapidamente o modo de edição para células ou linhas, dependendo da opção e exclusão RowEditable de linha do IgbTreeGrid.

    • IgbGridPinningActions- inclui funcionalidade e interface do usuário projetadas especificamente para a fixação de IgbTreeGrid linha. Ele permite que você fixe linhas rapidamente e navegue entre linhas fixadas e suas contrapartes desativadas.

    Eles são adicionados dentro do e tudo isso IgbTreeGrid é necessário para fornecer IgbActionStrip interações padrão.

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

    [!Note] When ActionStripComponent is a child component of the IgbTreeGrid, 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 o IgbActionStrip cenário para um Gmail com ações de linha como excluir, editar e etc. Você pode simplesmente criar um componente de botão com ícone, adicionar um evento de clique a ele e inseri-lo no 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>

    API References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.