The Paging feature for the igTreeGrid is extended from the igGrid Paging feature and is customized to present hierarchical data while also including additional API options and methods specific to the igTreeGrid.
Due to the nature of displaying hierarchical data additional paging modes are added as well as a way to present the parent-child context of the current and previous pages.
In the igTreeGrid there are two possible paging modes that operate either on the root level of data or on all data levels.
Paging mode option controls that functionality and by default is set to operate only on root level records. In the default mode changing the visible rows by expanding or collapsing rows will not affect the page count.
When paging operates on the root level only the root rows are paged and child rows do not affect paging. Expanding a root row will render all its children in the current page.
In the following examples flatDS in an array with only 4 root-level rows:
$("#treegrid").igTreeGrid({
dataSource: flatDS,
primaryKey: "employeeID",
foreignKey: "PID",
features: [{
name: 'Paging',
mode: 'rootLevelOnly'
}]
});
To apply paging to all visible records set mode equal to allLevels. This mode setting applies paging to all visible records regardless of their position in the data. The allLevels mode makes the paging controls dynamic. For instance the number of pages available changes as rows are expanded and collapsed.
$("#treegrid").igTreeGrid({
dataSource: flatDS,
primaryKey: "employeeID",
foreignKey: "PID",
features: [{
name: 'Paging',
mode: 'allLevels'
}]
});
For scenarios where the child data flows to the next page (when paging mode is set to "allLevels") and context needs to be introduced for the child level row, the TreeGridPaging feature introduces an additional contextRowMode option that allows rendering of a context row below the grid headers that contains information on the parent row(s) of the current child level row. There are three possible modes to choose from: "none", "parent" and "breadcrumb".
By default the option is set to "none", in which case no context row is rendered.
As you can see from the screenshot the row at the top is a child row, however its related parent is on the previous page. With this mode there's no way to determine which is the parent row from the context of the current page.
When contextRowMode is set to "parent" a context row will be displayed containing information on the immediate parent row. This mode is useful if the hierarchy isn't too deep and the immediate parent would give enough context for the child row(s).
To give better context for more complex hierarchies the "breadcrumb" mode can be used. It will render the full path through the ancestors to the current child row. By default the primary key values will be used to build the breadcrumb path to the current row.
There are additional options that allow modification of the displayed breadcrumb (applicable only when contextRowMode is set to 'breadcrumb'):
breadcrumbKey - sets the column key of ancestor to be shown in the breadcrumb trail. By default uses the primary key column.
breadcrumbDelimiter - sets the delimiter between ancestors in the breadcrumb trail. By default is ' > '.
The whole context row rendering can be handled manually using the renderContextRowFunc option, which allows setting a custom function to handle the rendering of the context row.
The function has four arguments:
dataRow - the curent data row, which the context row defines.
$textArea - the text area in the context row
parents - an array of the parents of the current data row
contextMode - the current context mode.
It can either return a string, which will then be injected into the text area of the context row (as html), or if false, empty string or nothing is returned the content can directly be added to the text area via the $textArea argument.
Both of the following examples are valid ways to modify the context row's content.
Via returning a custom string:
renderContextRowFunc: function(dataRow, $textArea, parents, mode) {
var contextRowText = "<div>";
$(parents).each(function(index) {
contextRowText += "<div> Parent " + index + " :" + this.row["firstName"] + " " + this.row["lastName"] + "</div>";
});
contextRowText += "</div>";
return contextRowText;
}
Via directly modifying the textArea content:
renderContextRowFunc: function(dataRow, $textArea, parents, mode) {
var contextRowText = "<div>";
$(parents).each( function(index) {
contextRowText += "<div> Parent "+ index + " :" + this.row["firstName"] + " " + this.row["lastName"] + "</div>";
});
contextRowText += "</div>";
$textArea.html(contextRowText);
}
And lead to the same result.
igTreeGrid features.View on GitHub