Ações de linha na grade React árvore
The Ignite UI for React Row Actions feature in React Tree Grid enables developers to use an IgrActionStrip 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 IgrTreeGrid – editing and pinning.
Usage
Os componentes de interface do usuário de ações predefinidas são:
IgrGridEditingActions- inclui funcionalidades e interface especificamente projetadas para aIgrTreeGridedição. Ele permite que você alterne rapidamente o modo de edição para células ou linhas, dependendo darowEditableopção e da exclusão deIgrTreeGridlinhas.IgrGridPinningActions- inclui funcionalidades e interface especificamente projetadas para oIgrTreeGridfixamento 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 doIgrTreeGrid e tudo isso é necessário para fornecerIgrActionStrip interações padrão.
<IgrTreeGrid rowEditable={true} primaryKey="ID">
<IgrColumn field="field">
</IgrColumn>
<IgrActionStrip>
<IgrGridPinningActions></IgrGridPinningActions>
<IgrGridEditingActions></IgrGridEditingActions>
</IgrActionStrip>
</IgrTreeGrid>
[!Note] When
ActionStripComponentis a child component of theIgrTreeGrid, 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 oIgrActionStrip 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 neleIgrActionStrip.
<IgrTreeGrid>
<IgrActionStrip>
<IgrGridPinningActions></IgrGridPinningActions>
<IgrGridEditingActions editRow={true} deleteRow={true}></IgrGridEditingActions>
</IgrActionStrip>
</IgrTreeGrid>
API References
Nossa comunidade é ativa e sempre acolhedora para novas ideias.