Selection features - single, multiple, and checkbox

The TreeTable component supports three kinds of selections such as single, multiple, and checkbox. The single selection is provided by enabling the selectionMode property on tree table and the selection attribute, which holds the selected tree table node.

The TreeTable component with a single selection feature to select a favorite tourist place would be written as follows:

<p-treeTable [value]="singleSelectionTreeTable" selectionMode="single"   
[(selection)]="selectedTouristPlace
(onNodeSelect)="nodeSelect($event)"
(onNodeUnselect)="nodeUnselect($event)"
(onRowDblclick)="onRowDblclick($event)" >
<p-header>Singe Selection</p-header>
<p-column field="name" header="Name"></p-column>
<p-column field="days" header="Days"></p-column>
<p-column field="type" header="Type"></p-column>
</p-treeTable>

The following screenshot shows a snapshot result with a single selection as an example:

Whereas, multiple selection is enabled by setting selectionMode as multiple (selectionMode="multiple"). In this case, the selection property holds an array of objects as selected nodes. The multiple selection is also provided through the checkbox selection. This can be achieved by setting selectionMode="checkbox".

The TreeTable component with a multi checkbox selection feature to select multiple tourist places would be written as follows:

<p-treeTable [value]="checkboxSelectionTreeTable" selectionMode="checkbox"
[(selection)]="selectedMultiTouristPlaces">
<p-header>Checkbox Selection</p-header>
<p-column field="name" header="Name"></p-column>
<p-column field="days" header="Days"></p-column>
<p-column field="type" header="Type"></p-column>
</p-treeTable>

The following screenshot shows a snapshot result with checkbox selection as an example:

The selection feature supports two event callbacks, such as onNodeSelect and onNodeUnselect, which provides the selected and unselected tree nodes. Refer to the events section for more details.

..................Content has been hidden....................

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