Beyond basic usage - advanced features

The TreeTable component also supports various advanced features such as lazy loading using the onNodeExpand callback, customized editable content using the ng-template template tag, and also context menu implementation, which is similar to the DataTable component. It also supports facets for header and footer using p-header and p-footer tags.

The content display of TreeTable is customized using ng-template. By default, the label of a tree node is displayed inside a tree node. To customize the content, define ng-template inside the column that gets the column as implicit variable (let-col) and rowData as the node instance (let-node="rowData"). In the same way, we can customize header and footer of this component.

Let's take an example of editable tree nodes by placing an input inside each template as shown here:

<p-treeTable [value]="templateTreeTable">
<p-header>Editable Cells with Templating</p-header>
<p-column field="name" header="Name">
<ng-template let-node="rowData" pTemplate="body">
<input type="text" [(ngModel)]="node.data.name"
class="edit-input">
</ng-template>
</p-column>
<p-column field="days" header="Days">
<ng-template let-node="rowData" pTemplate="body">
<input type="text" [(ngModel)]="node.data.days"
class="edit-input">
</ng-template>
</p-column>
<p-column field="type" header="Type">
<ng-template let-node="rowData" pTemplate="body">
<input type="text" [(ngModel)]="node.data.type"
class="edit-input">
</ng-template>
</p-column>
</p-treeTable>

The following screenshot shows a snapshot result with an editable template as an example:

In the preceding snapshot, we can edit all the tree node fields. For example, we updated tour package days from 9 to 20. TreeTable also supports event callbacks for expansion/collapsing nodes such as onNodeExpand, onNodeCollapse, and onContextmenuSelect event for context menu. Refer to the events section for more details.

PrimeNG 4.1 introduced the toggleColumnIndex property, which is used to define the index of the column that contains the the toggler element. By default, the toggleColumnIndex value is 0 (TreeTable always shows toggler on first column if togglerColumnIndex is not defined).

The following events table provides the complete details of events, parameters, and their description:

Name Parameters Description
onNodeSelect
  • event.originalEvent: Browser event
  • event.node: Selected node instance
Callback to invoke when a node is selected.
onNodeUnselect
  • event.originalEvent: Browser event
  • event.node: Unselected node instance
Callback to invoke when a node is unselected.
onNodeExpand
  • event.originalEvent: Browser event
  • event.node: Expanded node instance
Callback to invoke when a node is expanded.
onNodeCollapse
  • event.originalEvent: Browser event
  • event.node: Collapsed node instance
Callback to invoke when a node is collapsed.
onContextMenuSelect
  • event.originalEvent: Browser event
  • event.node: Selected node instance

Callback to invoke when a node is selected with right-click.

onRowDblclick
  • event.originalEvent: Browser event
  • event.node: Selected node instance

Callback to invoke when a row is double clicked.

The complete demo application with instructions is available on GitHub at
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter5/treetable.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.75.221