React Grid Row Adding

    The Ignite UI for React Row Adding feature in React Grid enables users to input and submit new data records without navigating to a separate form or page. With the IgrGrid, users can manipulate data through inline row adding and a powerful API for CRUD operations. Add an IgrActionStrip component with editing actions enabled in the grid's template. After that hover a row and use the provided button. Finally press ALT + + to spawn the row adding UI.

    React Grid Row Adding Example

    Row Adding Usage

    Then define a IgrGrid with bound data source, rowEditable set to true and an IgrActionStrip component with editing actions enabled. The addRow input controls the visibility of the button that spawns the row adding UI.

    <IgrGrid autoGenerate="false" data={NwindData} primaryKey="ProductID" rowEditable="true">
    <IgrColumn field="ProductID" header="Product ID" dataType="Number"></IgrColumn>
    <IgrColumn field="ReorderLevel" header="Reorder Level" dataType="Number"></IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" dataType="String"></IgrColumn>
    <IgrColumn field="UnitsInStock" header="Units In Stock" dataType="Number"></IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" dataType="Date"></IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean"></IgrColumn>

    <IgrActionStrip>
        <IgrGridEditingActions addRow="true"></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

    Note: Setting primary key is mandatory for row adding operations.

    Note: Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the editable column's input to false.

    Note: The IgrGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type IgrRowType to fine tune which records the button shows for.

    The internal BaseTransactionService is automatically provided for grid. It holds pending cell changes until the row state is submitted or cancelled.

    Start Row Adding Programmatically

    grid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported.

    Using beginAddRowById requires you to specify the row to use as context for the operation by its RowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing null for the first parameter.

    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

    The beginAddRowByIndex method works similarly but requires you to specify the index at which the UI should spawn. Allowed values range between 0 and the size of the data view - 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

    • The default position of row add UI is below the row that the end user clicked the add row button for.

    • The grid scrolls to fully display the add row UI automatically.

    • 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 para obter mais informações.

    After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the grid. In a grid that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the grid to its position if it is not in 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

    • Any row adding operation will stop if the data view of the grid gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, 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.

    Customizing Row Adding Overlay

    Customizing Text

    Customizing the text of the row adding overlay is possible using the RowAddTextDirective.

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

    Styling

    The row adding UI comprises the buttons in the IgrActionStrip editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics:

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.