'How can i set a default selection in PrimeNG Treetable

I want to set the selection with the value i get from Local-Storage. Here is the code:

HTML:

<p-treeTable [value]="tableDataRow$ | async"
               [columns]="checkColumnNotFixed()"
               selectionMode="single"
               [(selection)]="selectedRow"
>

TS:

public selectedRow;

 ngOnInit(): void {
    this.selectedRow = LocalStorageSelectedRow;
  }

The value is set and can be shown in the console, but in the UI, the row is not selected.



Solution 1:[1]

I don't know if my answer could help someone, but the thing that I do is assign to the model variable (selected row in this example) the values which I want to be selected. also I set a variable in the component called "compareSelectionBy", and set its value with "deepEquals".

Example : in the ts

this model =[ 
      { data: { name: 'Applications', size: '200mb', type: 'Folder' } },
      { data: { name: 'Angular', size: '25mb', type: 'Folder' } },
      { data: { name: 'Cloud', size: '20mb', type: 'Folder' } },
      { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip' } },
      { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip' } },]

in the html:

<p-treeTable
  [value]="items"
  [columns]="to.columns"
  selectionMode="checkbox"
  [(selection)]="model"
  [paginator]="to.paginator"
  [rows]="to.rows"
  (onNodeSelect)="onNodeSelect()"
  (onNodeUnselect)="onNodeUnselect()"
  compareSelectionBy="deepEquals"
  #tt
></p-treeTable>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David