behavior of selected row in table

[hfcprime]

I have master/detail components. Master has a table of records, detail shows the detail for a single record when the row is clicked on. The selectedCustomer is specified in the master table

Code: Select all

<p-table [value]="customers" [lazy]="true" (onLazyLoad)="loadCustomersLazy($event)" 
    [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading"
    (onRowSelect)="onRowSelect($event)"  selectionMode="single" dataKey="customerNumber"
    [(selection)]="selectedCustomer" [resizableColumns]="true">

The detail component uses selectedCustomer, and the component is filled correctly from the selected row.

The master table has an Add button, and I want to use an empty Customer in the detail component. The Add button calls

Code: Select all

    add() {
      this.selectedCustomer = new Customer();      
      this.detailUrl = this.router.url + '/detail' ;
      this.router.navigate([this.detailUrl]);     
    }

where the Customer constructor initializes fields appropriately. However, I get the previously selectedCustomer, not an empty Customer, when clicking on Add. If no row has been selected the code blows up, selectedCustomer is null. Can I assign the selection value named in the master table apart from selecting a row? Thanks

[hfcprime]

To put it a different way, is there any way to fire the "onRowSelect" event in code? There is a selectItem interface in primeng/ components /common:

Code: Select all

export interface SelectItem {
    label?: string;
    value: any;
    styleClass?: string;
    icon?: string;
    title?: string;
}

Can I use this to fire the event and assign the selectedRow value?