Search code examples
jsonangularprimengprimeng-datatable

Primeng Datatable selection with weird data


I'm retrieving two sets of data from an MSSQL server. Set one: (which is user specific, so this set changes)

[
  {
    "TargetID": 1,
    "Enabled": true
  },
  {
    "TargetID": 2,
    "Enabled": true
  }
]

Set two:

[
  {
    "Platform": "BB",
    "ID": 1
  },
  {
    "Platform": "MDL01",
    "ID": 2
  },
  {
    "Platform": "MDLEX",
    "ID": 4
  }
]

Set two populates the Primeng Datatable. Set one's TargetID value refers to the ID in set two. Whenever the TargetID value is the same as the ID in set two, I have to check this in the Datatable.

The datatable:

<div class="col-md-12">
            <p-dataTable [value]="doelplatformen" [rows]="3" class="thumbnail" resizableColumns="true" [paginator]="true" [pageLinks]="0"
                [rowsPerPageOptions]="[3,5,10]" emptyMessage="Loading data" [(selection)]="selectedDoelplatformen" (onRowSelect)="onRowSelectDoelplatform($event)">
                <p-column [style]="{'width':'30px'}" selectionMode="multiple"></p-column>
                <p-column [style]="{'width':'40px'}" field="ID" header="ID"></p-column>
                <p-column field="Platform" header="Platform"></p-column>
            </p-dataTable>
        </div>

I haven't tried much because I have no idea how this could be achieved? I can't even figure out how to hard code the selected rows...

Any help would be greatly apreciated! Thanks in advance!


Solution

  • You can map your set1 to array of Ids which should be selected:

    let selectedIds = set1.map(it => it.TargetID);
    

    Then pick those set2 records which Ids exists in that array:

    this.selectedItems = set2.filter(inv => selectedIds.indexOf(inv.ID) != -1);
    

    Use selection attribute of the table to select rows:

    <p-dataTable [value]="items" [(selection)]="selectedItems">
    ...
    </p-dataTable>
    

    Plunkr