Blazor Tree Grid Row Adding
The IgbTreeGrid
provides a convenient way to perform data manipulations through inline row adding and a powerful API for Blazor CRUD operations. Add an IgbActionStrip
component with editing actions enabled in the grid's template, hover a row and use the provided button, press ALT + + to spawn the row adding UI or ALT + SHIFT + + to spawn the UI for adding a child for the selected row.
Blazor Tree Grid Row Adding Example
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Row Adding Usage
Then define a IgbTreeGrid
with bound data source, RowEditable
set to true and an IgbActionStrip
component with editing actions enabled. The AddRow
input controls the visibility of the button that spawns the row adding UI.
<IgbTreeGrid AutoGenerate="false" Id="treegrid" PrimaryKey="ID" ForeignKey="ParentID" RowEditable="true">
<IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Title" Header="Title" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="HireDate" Header="Hire Date" DataType="GridColumnDataType.Date"></IgbColumn>
<IgbColumn Field="OnPTO" Header="On PTO" DataType="GridColumnDataType.Boolean"></IgbColumn>
<IgbActionStrip>
<IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
</IgbActionStrip>
</IgbTreeGrid>
razor
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 tofalse
.
Note: The
IgbGridEditingActions
inputs controlling the visibility of the add row and add child buttons may use the action strip context (which is of typeIgbRowType
to fine tune which records the buttons show for.
The internal BaseTransactionService
is automatically provided for IgbTreeGrid
. It holds pending cell changes until the row state is submitted or cancelled.
Start Row Adding Programmatically
IgbTreeGrid
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.
@code {
await this.treeGrid.BeginAddRowByIdAsync('ALFKI', true); // Spawns the add row UI to add a child for the row with PK 'ALFKI'
await this.treeGrid.BeginAddRowByIdAsync(null, false); // Spawns the add row UI as the first record
}
razor
The BeginAddRowByIndex
method works similarly but the row to use as context is specified by index.
@code {
await this.treeGrid.BeginAddRowByIndexAsync(10, true); // Spawns the add row UI to add a child for the row at index 10
await this.treeGrid.BeginAddRowByIndexAsync(0); // Spawns the add row UI as the first record
}
razor
Positioning
The default position of row add UI is below the row that the end user clicked the add row button for.
The
IgbTreeGrid
scrolls to fully display the add row UI automatically.The overlay for the add row UI maintains its position during scrolling.
Behavior
The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the Tree Grid Row Editing topic for more information.
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 IgbTreeGrid
. In a IgbTreeGrid
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 IgbTreeGrid
to its position if it is not in view.
Keyboard Navigation
- ALT + + - Enters edit mode for adding a row
- ALT + SHIFT + + - Enters edit mode for adding a child
ESC exits row adding mode without submitting any changes
TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row.
Feature Integration
Any row adding operation will stop if the data view of the
IgbTreeGrid
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.Summaries are updated after the row add operation finishes. The same is valid for the other data view dependant features such as sorting, filtering, etc.
Customizing Row Adding Overlay
Customizing Text
Customizing the text of the row adding overlay is possible using the RowAddTextDirective
.
<IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbTreeGrid>
@code {
private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
{
return @<span>Adding Row</span>;
};
}
razor
Customizing Buttons
Customizing the buttons of the row editing overlay is possible by using the RowEditActions
template.
<IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
</IgbTreeGrid>
//In JavaScript:
igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
var html = window.igTemplating.html;
return html`<div class="row-actions">
<button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
<button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
</div>`
}, false);
razor
Note: Using
RowEditActions
template will change edit actions for both editing and adding overlay buttons.
Styling
The row adding UI comprises the buttons in the IgbActionStrip
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
RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgbTreeGrid
Additional Resources
Our community is active and always welcoming to new ideas.