React Adição de linha de grade hierárquica

O recurso Ignite UI for React Adição de Linha em React Grade Hierárquica permite que os usuários insiram e enviem novos registros de dados sem navegar para um formulário ou página separada. Com o IgrHierarchicalGrid, os usuários podem manipular dados por meio da adição de linhas embutidas e uma API poderosa para operações CRUD. Adicione um IgrActionStrip componente com ações de edição ativadas no modelo da grade. Depois disso, passe o mouse sobre uma linha e use o botão fornecido. Por fim, pressione ALT + + para gerar a linha adicionando a interface do usuário.

React Hierarchical Grid Row Adding Example

Row Adding Usage

Em seguida, defina uma fonte de IgrHierarchicalGrid dados com vinculação, rowEditable definida como true e um IgrActionStrip componente com ações de edição habilitadas. A AddRow entrada controla a visibilidade do botão que gera a linha que adiciona a interface do usuário.

<IgrHierarchicalGrid
   autoGenerate="false"
   data={this.singersData}
   id="hGrid"
   primaryKey="ID"
   rowEditable="true"
   ref={this.hierarchicalGrid1Ref}>
   <IgrActionStrip>
     <IgrGridEditingActions
        addRow="true">
       </IgrGridEditingActions>
   </IgrActionStrip>
   <IgrColumn
       field="Artist"
       header="Artist"
       dataType="String"
       resizable="true">
   </IgrColumn>
   <IgrColumn
       field="Debut"
       header="Debut"
       dataType="Number"
       minWidth="88px"
       maxWidth="230px"
       resizable="true">
   </IgrColumn>
   <IgrColumn
       field="GrammyNominations"
       header="Grammy Nominations"
       dataType="String"
       resizable="true">
   </IgrColumn>
   <IgrColumn
       field="GrammyAwards"
       header="Grammy Awards"
       dataType="String"
       resizable="true">
   </IgrColumn>
   <IgrRowIsland
       childDataKey="Albums"
       autoGenerate="false">
       <IgrColumn
           field="Album"
           header="Album"
           dataType="String"
           resizable="true">
       </IgrColumn>
       <IgrColumn
           field="LaunchDate"
           header="Launch Date"
           dataType="Date"
           resizable="true">
       </IgrColumn>
       <IgrColumn
           field="BillboardReview"
           header="Billboard Review"
           dataType="String"
           resizable="true">
       </IgrColumn>
       <IgrColumn
           field="USBillboard200"
           header="US Billboard 200"
           dataType="String"
           resizable="true">
       </IgrColumn>
       <IgrRowIsland
           childDataKey="Songs"
           autoGenerate="false">
           <IgrActionStrip>
                <IgrGridEditingActions
                    addRow="true">
                </IgrGridEditingActions>
            </IgrActionStrip>
           <IgrColumn
               field="Number"
               header="No."
               dataType="String"
               resizable="true">
           </IgrColumn>
           <IgrColumn
               field="Title"
               header="Title"
               dataType="String"
               resizable="true">
           </IgrColumn>
           <IgrColumn
               field="Released"
               header="Released"
               dataType="String"
               resizable="true">
           </IgrColumn>
           <IgrColumn
               field="Genre"
               header="Genre"
               dataType="String"
               resizable="true">
           </IgrColumn>
       </IgrRowIsland>
   </IgrRowIsland>
   <IgrRowIsland
       childDataKey="Tours"
       autoGenerate="false">
           <IgrActionStrip>
                <IgrGridEditingActions
                    addRow="true">
                </IgrGridEditingActions>
            </IgrActionStrip>                  
       <IgrColumn
           field="Tour"
           header="Tour"
           dataType="String"
           resizable="true">
       </IgrColumn>
       <IgrColumn
           field="StartedOn"
           header="Started on"
           dataType="String"
           resizable="true">
       </IgrColumn>
       <IgrColumn
           field="Location"
           header="Location"
           dataType="String"
           resizable="true">
       </IgrColumn>
       <IgrColumn
           field="Headliner"
           header="Headliner"
           dataType="String"
           resizable="true">
       </IgrColumn>
   </IgrRowIsland>
</IgrHierarchicalGrid>

Observação: a configuração da chave primária é obrigatória para operações de adição de linha.

Observação: todas as colunas, excluindo a chave primária, são editáveis na linha que adiciona a interface do usuário por padrão. Se você deseja desabilitar a edição de uma coluna específica, é necessário definir a editable entrada da coluna como false.

Observação: a IgrGridEditingActions entrada que controla a visibilidade do botão adicionar linha pode usar o contexto da faixa de ação (que é do tipo IgrRowType para ajustar quais registros o botão mostra.

O interno BaseTransactionService é fornecido IgrHierarchicalGrid automaticamente. Ele mantém as alterações de célula pendentes até que o estado da linha seja enviado ou cancelado.

Start Row Adding Programmatically

IgrHierarchicalGrid permite gerar programaticamente a interface do usuário de adição de linha usando dois métodos públicos diferentes. Um que aceita uma ID de linha para especificar a linha na qual a interface do usuário deve ser gerada e outro que funciona por índice. Você pode usar esses métodos para gerar a interface do usuário em qualquer lugar dentro da exibição de dados atual. Não há suporte para alterar a página ou especificar uma linha que seja, por exemplo, filtrada.

Usar beginAddRowById requer que você especifique a linha a ser usada como contexto para a operação por its RowID (PK). Em seguida, o método funciona como se o usuário final tivesse clicado no botão de faixa de ação adicionar linha para a linha especificada, gerando a interface do usuário sob ela. Você também pode fazer com que a interface do usuário apareça como a primeira linha na grade, passando null para o primeiro parâmetro.

gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record

O beginAddRowByIndex método funciona de forma semelhante, mas exige que você especifique o índice no qual a interface do usuário deve ser gerada. Os valores permitidos variam entre 0 e o tamanho da exibição de dados - 1.

gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record

Positioning

• A posição padrão da interface do usuário de adição de linha está abaixo da linha para a qual o usuário final clicou no botão adicionar linha.

• A IgrHierarchicalGrid rolagem para exibir totalmente a interface do usuário de adição de linha automaticamente.

• A sobreposição para a interface do usuário de adição de linha mantém sua posição durante a rolagem.

Behavior

A interface do usuário de adição de linha tem o mesmo comportamento que a de edição de linha, pois foi projetada para fornecer uma experiência de edição consistente aos usuários finais. Consulte o tópico Edição de linha de grade hierárquica para obter mais informações.

Depois que uma nova linha é adicionada por meio da interface do usuário de adição de linha, sua posição e/ou visibilidade é determinada pelo estado de classificação, filtragem e agrupamento do IgrHierarchicalGrid. Em um IgrHierarchicalGrid que não tem nenhum desses estados aplicados, ele aparece como o último registro. Uma barra de lanches é exibida brevemente contendo um botão que o usuário final pode usar para rolar até IgrHierarchicalGrid sua posição se não estiver em view.

Keyboard Navigation

• ALT + +- Entra no modo de edição para adicionar uma linha

• ESC sai do modo de adição de linha sem enviar nenhuma alteração

• TAB mova o foco de uma célula editável na linha para a próxima e da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO. A navegação do botão CONCLUÍDO vai para a célula editável mais à esquerda dentro da linha editada no momento.

Feature Integration

• Qualquer operação de adição de linha será interrompida se a visualização de dados do IgrHierarchicalGrid for modificada. Todas as alterações feitas pelo usuário final são enviadas. As operações que alteram a visualização de dados incluem, mas não se limitam a, classificação, agrupamento, filtragem, paginação etc.

• Os resumos são atualizados após a conclusão da operação de adição de linha. O mesmo é válido para os outros recursos dependentes da visualização de dados, como classificação, filtragem etc.

• Ao gerar a interface do usuário para o IgrHierarchicalGrid, qualquer layout filho atualmente expandido para uma linha para a qual o usuário final clica no botão adicionar linha é recolhido.

Customizing Row Adding Overlay

Customizing Text

Personalizar o texto da linha adicionando sobreposição é possível usando o RowAddTextDirective.

gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return ('Adding Row');
}

Styling

A interface do usuário de adição de linha compreende os botões nas IgrActionStrip ações de edição, os editores de edição e a sobreposição, bem como a barra de lanches que permite que os usuários finais rolem até a linha recém-adicionada. Para estilizar esses componentes, você pode consultar estes guias abrangentes em seus respectivos tópicos:

• Edição de linha de grade hierárquica
• Lanchonete

API References

• rowEditable
• RowEditEnter
• RowEdit
• RowEditDone
• RowEditCancel
• endEdit
• primaryKey
• IgrHierarchicalGrid

Additional Resources

• Edição de grade hierárquica

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for React Forums
• Ignite UI for React GitHub