Ações de linha na grade de dados Angular

    O componente de grade no Ignite UI for Angular fornece a capacidade de usar o ActionStrip e utilizar o CRUD para componentes de linha/célula e fixação de linha. O componente Faixa de ação pode hospedar controles de interface do usuário predefinidos para essas operações.

    Usage

    O primeiro passo é importar o IgxActionStripModule em nosso arquivo app.module.ts:

    // app.module.ts

...
import { IgxActionStripModule } from 'igniteui-angular';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxActionStripModule],
    ...
})

    Os componentes de interface do usuário predefinidos actions são:

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

    • IgxGridPinningActionsComponent- inclui funcionalidade e interface do usuário projetadas especificamente para a fixação de linha de grade. 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 <igx-action-strip> é necessário para ter uma Faixa de Ação que forneça interações padrão.

    <igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
    <igx-column *ngFor="let c of columns" [field]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>
    Note

    Quando IgxActionStripComponent é um componente filho da grade, passar o mouse sobre uma linha mostrará automaticamente a IU.

    Custom implementation

    Esses componentes expõem modelos que oferecem flexibilidade para personalização. Por exemplo, se quisermos usar o para um cenário do ActionStrip Gmail com ações de linha como delete, edit e etc. Você pode simplesmente criar um componente igx-icon de botão, adicionar um evento de clique a ele e inseri-lo no igx-action-strip componente.

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

    Note

    As ações predefinidas herdam IgxGridActionsBaseDirective e, ao criar um componente de ação de grade personalizado, ele também deve herdar IgxGridActionsBaseDirective.

    API References

    Para obter informações mais detalhadas sobre a API Action Strip, consulte os seguintes links:

    Componentes e/ou diretivas adicionais que podem ser usados dentro da Action Strip: