0

I am using p-datatable in my angular project. enter image description here

When I click Delete in that row, I want to add just "display: none" style to that row since I want to just hide it and not delete it. The element will actually get deleted only when the user click the final save button. Can someone sugegst me how to pass tr element into my action

This how my code looks

<p-column *ngIf="configuration.RowQuickActions">
         <ng-template let-dataRow="rowData" pTemplate="body">
            <div style="text-align: center">
               <a class="action-icon">
                  <i class="material-icons text-center" [mdMenuTriggerFor]="rowQuickActionMenu">more_vert</i>
               </a>
            </div>
            <md-menu #rowQuickActionMenu="mdMenu" xPosition="before" [overlapTrigger]="false">
               <a *ngFor="let action of configuration.RowQuickActions" class="datatable-quick-action" (click)="performRowQuickAction(action, dataRow)" md-menu-item>
                  <i *ngIf="action.ActionIcon" class="material-icons">{{action.ActionIcon}}</i>{{action.ActionName}}</a>
            </md-menu>
         </ng-template>
      </p-column>

There can be many actions and many datatables use this functionality.

RockGuitarist1
  • 698
  • 1
  • 7
  • 16
Renuka Dasari
  • 61
  • 9

4 Answers4

0

Try using [ngClass]. You can write function, which return "display: none" when button was clicked and "" otherwise.

Karolke
  • 83
  • 1
  • 6
0

use [ngStyle] Directive for Hide you row

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
0

In your delete function add the css 

style="display: none"

or If you want to apply the styles to inner elements which are associated to p-DataTable then use styleClass

Example:

<p-datatable="InputData"styleClass="input-data">

in your CSS: 

.input-data{
 display:none;
}

Hope it helps

Ragavan Rajan
  • 4,171
  • 1
  • 25
  • 43
0

I updated the prime ng datatable to latest revision (TurboTable) and the new code has tr tags so just added the below one in the html

<tr *ngIf="!dataRow.hide">

and in the method in the component I have added this.

performRowQuickAction(action, dataRow) {
  dataRow.Hide = true;
  // do other things
}

Thanks everyone for the help.

Renuka Dasari
  • 61
  • 9