Ações de linha na grade Angular árvore

    O componente de grade de árvore no Ignite UI for Angular fornece a capacidade de usar o ActionStrip e utilizar 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/action-strip';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

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

    Os componentes pré-definidosactions da interface são:

    • IgxGridEditingActionsComponent- inclui funcionalidades e interface especificamente projetadas para a edição em grade. Ele permite alternar rapidamente o modo de edição para células ou linhas, dependendo darowEditable opção e da exclusão de linhas da grade.

    • IgxGridPinningActionsComponent- inclui funcionalidades e interface especificamente projetadas para o fixar linhas de grade. Ele permite que você rapidamente fixe as linhas e navegue entre as fileiras fixadas e suas contrapartes desativadas.

    Eles são adicionados dentro do<igx-action-strip> e tudo isso é necessário para ter uma Action Strip fornecendo interações padrão.

    <igx-tree-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-tree-grid>
    Note

    QuandoIgxActionStripComponent for um componente filho da grade, passar o mouse por uma linha mostrará automaticamente a interface.

    Custom implementation

    Esses componentes expõem modelos que oferecem flexibilidade para personalização. Por exemplo, se quisermos usar oActionStrip para um cenário do Gmail com ações de linha comodelete,edit etc. Você pode simplesmente criar um componente button,igx-icon adicionar um evento de clique e inseri-lo noigx-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 herdamIgxGridActionsBaseDirective e, ao criar um componente de ação de grade personalizado, ela também deve herdarIgxGridActionsBaseDirective.

    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: