Ações de linha na grade Web Components

    O recurso Ignite UI for Web Components Ações de Linha no Web Components Grid permite que os desenvolvedores usem e IgcActionStrip utilizem o 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 IgcGridComponent edição e fixação.

    Usage

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

    • IgcGridEditingActions- inclui funcionalidade e interface do usuário projetada especificamente para a IgcGridComponent 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 IgcGridComponent.

    • IgcGridPinningActions- inclui funcionalidade e interface do usuário projetadas especificamente para a fixação de IgcGridComponent 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 IgcGridComponent é necessário para fornecer IgcActionStrip interações padrão.

    <igc-grid row-editable="true" primary-key="ID">
    <igc-column field="field"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

    [!Note] When ActionStripComponent is a child component of the IgcGridComponent, 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 IgcActionStrip 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 IgcActionStrip.

    <igc-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxButton="icon" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igc-grid>

    <igc-grid>
    <igc-action-strip #actionstrip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

    API References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.