When viewing a table using PrimeNG's p-table in Angular, if you divide a row of data into multiple rows, how to select a row without rspan specification

Your Angular and PrimeNG Versions

angular-cli:8.3.19
primeng:8.1.1

What I'm trying to do

Problems

3 of the above will only be selected for the line shown in rspan (see picture below).

What do you want to do

I want the check box on the left side of the line to make the cell with the white background in the above picture blue at the same time as the cell above it, or to return it to the original white cell state.

The html template below shows the above conditions.

<p-table [columns]="cols" [value]="cars" [(selection)]="selectedCars3" dataKey="vin" [scrollable]="true"
    scrollHeight="200px">
    <ng-template pTemplate="caption">
      <table class="tbl-caption">
        <tr>
          <td>List of Cars</td>
          <td>
            <p-paginator></p-paginator>
          </td>
        </tr>
      </table>
    </ng-template>
    <ng-template pTemplate="colgroup">
      <colgroup>
        <col style="width:50px">
        <col style="width:150px">
        <col style="width:150px">
        <col style="width:250px">
        <col style="width:250px">
        <col style="width:150px">
      </colgroup>
    </ng-template>

    <ng-template pTemplate="header"let-columns>
      <tr class="tbl-row-height">
        <th colspan="3">colspan3</th>
        <th colspan="2">colspan2</th>
        <th>no span</th>
      </tr>
      <tr class="tbl-row-height">
        <throwspan="2">
          Select All <br>
          <p-tableHeaderCheckbox>/p-tableHeaderCheckbox>
        </th>
        <thrspan="2">Vin</th>
        <thrspan="2">Year</th>
        <th>Brand</th>
        <th>Color</th>
        <thrspan="2">Date</th>
      </tr>
      <tr class="tbl-row-height">
        <th>Brand</th>
        <th>Color</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body"let-rowDatalet-columns="columns">
      <tr class="tbl-row-height" [pSelectableRow]="rowData">
        <td style="text-align:center;"rspan="2">
          <p-tableCheckbox[value]="rowData"></p-tableCheckbox>
        </td>
        <td rspan="2">
          {{rowData[columns[0].field]}}
        </td>
        <td rspan="2">
          {{rowData[columns[1].field]}}
        </td>
        <td*ngIf="!rowData [columns[2].field+'Editable']">
          {{rowData[columns[2].field]}}
        </td>
        <td*ngIf="rowData[columns[2].field+'Editable']"pEditableColumn>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown appendTo="body" [options]="brands" [(ngModel)]="rowData[columns[2].field]"[style]="{'width':'100%'}">
              </p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{rowData[columns[2].field]}}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          {{rowData[columns[3].field]}}
        </td>
        <td rspan="2">
          <div>
            <inputpInputText style="width:8em;"[matDatepicker]="picker"[(ngModel)]="rowData.date"placeholder="Update Date">
            <mat-datepicker-toggle style="margin-left:-35px;"matSuffix [for]="picker">/mat-datepicker-toggle>
            <mat-datepicker#picker></mat-datepicker>
          </div>
        </td>
      </tr>
      <tr class="tbl-row-height">
        <td>
          {{rowData[columns[3].field]}}
        </td>
        <td>
          {{rowData[columns[2].field]}}
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="footer">
      <tr class="tbl-row-height">
        <td></td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td>a</td>
        <td style="background-color:darkgray;">/td>
      </tr>
    </ng-template>
  </p-table>

(Note) Instead of increasing the number of columns, we test by displaying several columns in the second row, but in fact, we expect items with different values to be displayed in two rows

What should I do to select two lines together when I check the check box? (Of course, if I uncheck it, I have to cancel the selection of two lines together.)
I have found an example of changing the background color with hover by specifying <tbody>~</tbody> as a unit of aggregation in the net information, but if you write above using PrimeNG's p-table, pTemplate="body" has all the lines of data inserted in one <tbody>.

There were other examples of PrimeNG samples in which the same keys on multiple lines were selected together.
However, we could not find a direct example of how to display a single line as multiple lines.

If anyone knows how to do it, please let me know.

Thank you for your cooperation.

html5 angular

2022-09-29 22:34

1 Answers

I solved myself.
[pSelectableRow]="rowData" in the second line was also achieved by specifying [pSelectableRow] ro"rowData" as in the first line.

Before Modification

<tr class="tbl-row-height">

Corrected

<tr class="tbl-row-height" [pSelectableRow]="rowData">

2022-09-29 22:34

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656