Web Components Edição de linha de grade de árvore

    O recurso de Edição de Linhas Ignite UI for Web Components no Web Components Tree Grid permite editar dados diretamente dentro de.IgcTreeGridComponent Além dessa forma conveniente de manipular dados, há uma API poderosa para operações completas de CRUD. Você pode realizar a edição de linhas em grade clicando em uma linha e pressionando a tecla Enter. Outra maneira rápida é fazer dois clics com o mouse na linha que precisa ser modificada.

    Web Components Tree Grid Row Editing Example

    O exemplo a seguir demonstra como habilitar a edição de linhas no.IgcTreeGridComponent Mudar o valor de uma célula e depois clicar ou navegar para outra célula na mesma linha não atualiza o valor da linha até ser confirmado usando o botão Feito, ou descartado usando o botão Cancelar.

    Note

    Quando uma linha está no modo de edição, clicar em uma célula em outra linha agirá como se o botão "Concluído" estivesse pressionado, enviando todas as alterações feitas na linha anterior. Se a célula recém-focada for editável, a nova linha também entrará no modo de edição. No entanto, se a célula não for editável, apenas a linha anterior sairá do modo de edição.

    Row Editing Usage

    Define a IgcTreeGridComponent with bound data source and rowEditable set to true:

    <igc-tree-grid id="grid" primary-key="ID" width="100%" height="500px" row-editable="true">
    <igc-column field="Name" header="Name" data-type="string"></igc-column>
    <igc-column field="Age" header="Age" data-type="number"></igc-column>
    <igc-column field="Title" header="Title" data-type="string"></igc-column>
    <igc-column field="HireDate" field="Hire Date" data-type="date"></igc-column>
</igc-tree-grid>

    constructor() {
    var grid  = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
}
    Note

    A configuração da chave primária é obrigatória para operações de edição de linha.

    Note

    Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgcTreeGridComponent, all rows, with defined field property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the editable input of that column to false.

    Note

    The IgcTreeGridComponent utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

    Positioning

    • A posição padrão da sobreposição será abaixo da linha que está no modo de edição

    • Se não houver espaço abaixo da linha, a sobreposição aparecerá acima da linha.

    • Uma vez mostrado - superior ou inferior, a sobreposição manterá essa posição durante a rolagem, até que a sobreposição seja fechada.

    Behavior

    • Se a linha estiver no modo de edição, a edição continuará, se uma célula da mesma linha for clicada.

    • Clicar no botão "Concluído" concluirá a edição da linha e enviará alterações para a fonte de dados ou para uma transação, se disponível. Além disso, a linha sairá do modo de edição.

    • Clicar no botão "Cancelar" reverterá todas as alterações atuais na linha e a linha sairá do modo de edição.

    • Se a linha estiver no modo de edição, clicar em uma célula de outra linha concluirá a edição da linha atual e enviará novas alterações de linha (o mesmo comportamento clicando no botão "Concluído"). Se a nova célula que recebe o foco for editável, a nova linha também entrará no modo de edição, enquanto se a célula não for editável, apenas a linha anterior sairá do modo de edição.

    • Se a linha estiver no modo de edição eIgcTreeGridComponent rolada para que essa linha saia da área visível, esta última ainda estará no modo de edição. QuandoIgcTreeGridComponent é rolada, para que a linha fique visível novamente, ela ainda estará no modo de edição. Quando clicado para foraIgcTreeGridComponent, a célula também permanece no modo de edição.

    • Ao realizar operações de ordenação, filtragem, busca e ocultação, todas as mudanças atuais na linha serão revertidas, e a linha sairá do modo de edição.

    • Ao realizar operações de paginação, redimensionamento, fixação e movimentação, ele sai do modo de edição e envia o valor mais recente.

    • Cada célula modificada recebe o estilo editado até que a edição de linha seja concluída. Esse é o comportamento quandoIgcTreeGridComponent não é fornecido com as transações. Quando as transações estiverem disponíveis, o estilo de edição de célula é aplicado até que todas as alterações sejam confirmadas.

    Keyboard Navigation

    • ENTER e F2 entra no modo de edição de linha

    • ESC sai do modo de edição de linha e não envia nenhuma das alterações de célula, feitas enquanto a linha estava no modo de ediçã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 alteração de dados encerrará as operações de edição de linha e enviará as alterações de linha atuais. Isso incluirá operações como classificação, alteração de critérios de agrupamento e filtragem, paginação, etc.

    • Os resumos serão atualizados após a conclusão da edição da linha. O mesmo é válido para os outros recursos, como classificação, filtragem, etc.

    Customizing Row Editing Overlay

    Customizing Text

    É possível personalizar o texto da sobreposição de edição de linha por meio de modelos.

    ARowChangesCount propriedade é exposta e contém a contagem das células alteradas.

    public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
    return html`Changes: ${ctx.implicit}`;
}

    Customizing Buttons

    Também é possível personalizar os botões da sobreposição de edição de linhas por meio de modelos.

    public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => {
    const endRowEdit = ctx.implicit;
    return html`
        <button @click="${(event) => endRowEdit(false, event)}">Cancel</button>
        <button @click="${(event) => endRowEdit(true, event)}">Apply</button>
    `;
}

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <igc-tree-grid class="grid"></igc-tree-grid>

    Em seguida, defina as propriedades CSS relacionadas para essa classe:

    .grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}

    Demo

    Known Issues and Limitations

    • When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

    • Seleção de linha

    • Expandir/recolher linha

    • Edição de linha

    • Fixação de linha

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.