Ações de linha em Web Components grade hierárquica

The Ignite UI for Web Components Row Actions feature in Web Components Hierarchical Grid enables developers to use an IgcActionStrip 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 IgcHierarchicalGridComponent – editing and pinning.

Usage

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

IgcGridEditingActions- inclui funcionalidades e interface especificamente projetadas para aIgcHierarchicalGridComponent 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 deIgcHierarchicalGridComponent linhas.
IgcGridPinningActions- inclui funcionalidades e interface especificamente projetadas para oIgcHierarchicalGridComponent 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 doIgcHierarchicalGridComponent e tudo isso é necessário para fornecerIgcActionStrip interações padrão.

<igc-hierarchical-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-hierarchical-grid>

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

<igc-hierarchical-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-hierarchical-grid>

API References

Nossa comunidade é ativa e sempre acolhedora para novas ideias.