Add Rows Dynamically in Tree Grid

In order to create a new row dynamically, you can use some of public methods available in IntegralUI Tree Grid component, which allows you to insert a row at specific position in the grid. In following sections, you will learn how to add new rows on demand and how to use a custom inline cell editor.

A sample code that shows how to add rows dynamically is available in JavaScript, Angular, React and Vue, in following sections below.

As demo shows, above the Grid we have two buttons: 'Add Root' and Add Child, which when clicked add a new row at the root level or add a new row as child of currently selected row. Whenever the add button is clicked, a new row is created at specific position in the grid and an inline cell editor appears. The cells in the last column contain action buttons that confirm or cancel the change of cell values.

After row is created, you can easily edit its cell values by clicking on edit action button. In addition, you can remove rows by clicking on remove action button.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Add Rows Dynamically in Tree Grid

To add a new row from code, you can use some of the tree grid public methods. In this case, because you will add rows as parent and child into a specific position in tree structure, you can use the insertRowAt method. This method adds a new row at specific position either as root or as child to specified row.

In this example, above the grid there are two buttons. The 'Add Root' button adds a new row to the grid at root level, while the 'Add Child' button adds a new row to the grid as child of currently selected row. If there is no row selected, both buttons will add root rows.

• JavaScript
• Angular
• React
• Vue

The createNewRow method creates a row object where cells have empty string or zero as values. The important issue here is the cid values, each cell in order to appear under specific column it must have the cid value equal to the column's id value. This creates a link between columns and row cells.

• JavaScript
• Angular
• React
• Vue

Whenever a new row is added, the edit mode is activated so the user can enter values to row cells. The Tree Grid doesn't know automatically that editing is active, so you need to activate the edit mode by setting the editorVisible property value for the new row to true.

Related: How to Create an Inline Cell Editor

• JavaScript
• Angular
• React
• Vue

By default, the input focus is set to appear in the first editable cell. When setting a focus to a grid cell, it is important to here to know that there is some delay before editor appears in grid cell. This requires update on the grid view or layout in full, so that the editor appears in the DOM prior setting the input focus.

To set the focus, you can either:

• call the updateView and move the focus to the grid cell in a timeout, or
• call the updateLayout with await, and once completed proceed with focus setting

• JavaScript
• Angular
• React
• Vue

The updateLayout is an asynchronous method, so you can call await to wait until it finishes and proceed with other actions. Here is worth to mention that in order to use await, the method that contains a call to updateLayout must also be an asynchronous method.

Conclusion

In Tree Grid component, by creating custom templates and using available public methods and events, you can add new rows on demand and edit them with an inline cell editor. You can use this example as a guideline to create your own solution on how to add and edit grid rows dynamically.

Tree Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.