How to add a new editable row in primeng?

Question

I want create a new editable row by default when clicking "ADD NEW button". like below screen shot. When I click "+" button a new row will create. once I edit that row and click "done" button the new row will submit.

I have tries below code. a new row created but without editable option. See below screen shot. I want create a new editable row when clicking add new button.


  addNew() {
    let newData: IStoreStaffDesignation = {
      storeStaffDesignationId: '2',
      schoolBaseCode: '',
      code: '',
      name: '',
      description: '',
      nameTamil: '',
      nameSinhala: '',
      sortOrder: 0,
      appUserBaseId: ''
    };
    this.storeStaffDesignations.unshift(newData);

    //TODO : call api
  }

  <p-table #dt1 [value]="storeStaffDesignations" [rowHover]="true" [paginator]="true" [rows]="10" [showCurrentPageReport]="true"
            responsiveLayout="scroll" [resizableColumns]="true"
            [lazy]="true" (onLazyLoad)="lazyLoadHandler($event)" [loading]="loading"
            currentPageReportTemplate="Showing {{first}} to {{last}} of {{totalRecords}} entries"
            [rowsPerPageOptions]="[10, 25, 50]" editMode="row" dataKey="storeStaffDesignationId"
            [globalFilterFields]="['code', 'name', 'description']" [(selection)]="selectedStoreStaffDesignation"
            styleClass="p-datatable-striped p-datatable-gridlines"
            >
     // header template removed
     // body
     <ng-template pTemplate="body" let-storeStaffDesignation let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="storeStaffDesignation" style="height: 1rem" [class]="'storeStaffDesignation' +storeStaffDesignation.storeStaffDesignationId">
          // td tag removed
        </tr>
     // rest of the rows
     </ng-template >
 </ptable>

Anyone has a example for this

score 0 · Answer 1 · answered Sep 13 '22 at 07:08

0

Here is my simple approach:

//HTML
<button (click)=onAddNewRow()>Add new Product</button>

//TS
onAddNewRow(){
  this.products.unshift({});
}

Forked from prime's docs

Pretty much the same as yours, I didn't check your template but I don't think we need to change the template at all.
The reason is product/data is a collection and we are updating it within our component, the template should reflect automatically.

answered Sep 13 '22 at 07:08

Jimmy

1,276
7
8

Hi, I also did like yours. please check my question. I am asking how to do a editable row when click open new button. – hanushi Sep 13 '22 at 18:32
Did the link I provided work for you? When you click add new, do you have the ability to edit the new row? – Jimmy Sep 13 '22 at 18:45
yes, That is cell editors. After clicking "add new button", I need to go to click every cell in that new row. I am asking is there any ways to get editable cell by default in the newly created. – hanushi Sep 14 '22 at 08:53
I still don't understand your question. By clicking the button, you will have editable cells, and you can visit each cell to enter your content. In case you don't want to edit all newly added cells, just set the default value for some cells. – Jimmy Sep 14 '22 at 14:36
Please check the screenshots that I attached in the question, The both images are different. In first image check 2nd row (newly created row) , in 2nd image check 1st row ( newly created row) – hanushi Sep 14 '22 at 19:16
So you want the placeholder? I edited the code, you can check the link to see if it's what you want. – Jimmy Sep 15 '22 at 11:16
Thanks @Jimmy. Is the any ways to differentiate `create new` and `edit` when click "check icon". I mean once I create a new row I have to call create API and If I edit the row then I want to call edit API. But here I can only call edit API. – hanushi Sep 15 '22 at 17:33
The edit button is untouched, so you can save/cancel as usual. No overlap between edit/create. The reason I invoke editHandler is because it cloned the new product, you can just copy the body of editHandler to fulfill the job. The document also says you can freely write your own edit function. – Jimmy Sep 15 '22 at 22:10

score 0 · Answer 2 · answered Aug 17 '23 at 11:04

0

HTML

 <p-table #tempDataTable></p-table>

TS

  @ViewChild('tempDataTable') tempDataTable: any;
    
  this.tableData.unshift({});
    
  this.tempDataTable?.initRowEdit({});

answered Aug 17 '23 at 11:04

Sachin from Pune

656
8
19

How to add a new editable row in primeng?

2 Answers2