Web Components Grid Row Editing

The Ignite UI for Web Components Row Editing feature in Web Components Grid allows editing data directly within the IgcGridComponent. On top of this convenient way to manipulate data, there’s a powerful API for full CRUD operations. You can perform grid row editing by clicking on a row and pressing Enter key. Another quick way is to double click with the mouse on the row that needs to be modified.

Web Components Grid Row Editing Example

The following sample demonstrates how to enable row editing in the IgcGridComponent. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the Done button, or discarded by using Cancel button.

[!Note] When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode.

Row Editing Usage

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

<igc-grid id="grid" primary-key="ProductID" width="100%" height="500px" row-editable="true">
    <igc-column field="ProductID" header="Product ID" editable="false"></igc-column>
    <igc-column field="ReorderLevel" header="Reorder Level" data-type="number"></igc-column>
    <igc-column field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="unitsInStock" field="UnitsInStock" header="Units In Stock" data-type="number"></igc-column>
    <igc-column field="OrderDate" field="Order Date" data-type="date"></igc-column>
    <igc-column field="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

constructor() {
    var grid  = document.getElementById('grid') as IgcGridComponent;
    var unitsInStock = document.getElementById('unitsInStock') as IgcColumnComponent;
    grid.data = this.data;
    unitsInStock.bodyTemplate = this.unitsInStockCellTemplate;
}

public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => {
    return html`<input name="units" value="${ctx.cell.value}" style="color: black" />`;
}

[!Note] Setting primary key is mandatory for row editing operations.

[!Note] Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgcGridComponent, 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 IgcGridComponent 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.
If row is in edit mode and IgcGridComponent is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When IgcGridComponent is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the IgcGridComponent, the cell will also stay in edit mode.
Ao realizar operações de classificação, filtragem, pesquisa e ocultação, reverterá todas as alterações atuais na linha e a linha sairá do modo de edição.
Ao executar operações de paginação, redimensionamento, fixação e movimentação, sairá do modo de edição e enviará o valor mais recente.
Each modified cell gets edited style until row edit is finished. This is the behavior, when IgcGridComponent is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed.

Enter e F2 entram no modo de edição de linha
Esc sai do modo de edição de linha e não envia nenhuma alteração de célula feita enquanto a linha estava no modo de edição.
Tab move 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 CANCEL e DONE. A navegação do botão DONE 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.

Expandir e recolher linhas agrupadas não encerrará a edição da linha atual.

Customizing Row Editing Overlay

Customizing Text

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

A propriedade RowChangesCount é 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-grid class="grid"></igc-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

rowEditable
RowEditEnter
RowEdit
RowEditDone
endEdit
field
editable
primaryKey
IgcGridComponent

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Web Components Grid Row Editing