PrimeNG: Editable dataTable column

Question

I have a data table and i am trying to make the column careOfferingSpaceAvailableId editable then once user edits i want to update that row column also in the database.

1.) However for some reason the UI does not render this column as editable

2.) I have a "next" button and once clicked i do not know how to grab the values that user enters into the spaces available editable column. I need to grab each spaceAvailable input along with its careOfferingSpaceAvailableId to update to the database

 <p-dataTable [value]="this.careOfferingSpaceList" [editable]="true" selectionMode="single" rows="25" [responsive]="true"
      [loading]="false">
      <p-column field="id" [editable]="true" hidden="true"></p-column>
      <p-column field="weekNo" [editable]="true" header="Offerings">
        <ng-template let-careOfferingSpace="rowData" pTemplate="body">
          <span> Week {{careOfferingSpace.weekNo}} </span>
        </ng-template>
      </p-column>
      <p-column field="startDate" [editable]="true" header="Date">
        <ng-template let-careOfferingSpace="rowData" pTemplate="body">
          <span> {{careOfferingSpace.startDate}} - {{careOfferingSpace.endDate}} </span>
        </ng-template>
      </p-column>
      <p-column field="careOfferingSpaceAvailableId" hidden="true" header="Space Available Id" [editable]="true">
      </p-column>
      <p-column field="spaceAvailable" header="Spaces Available" [editable]="true">
      </p-column>

    </p-dataTable>

You can see even if i click space available column i cant type data

Antikhippe Antikhippe · Accepted Answer · 2018-02-22T07:05:01

1.) You can't edit your cells because you added selectionMode property to the table so if you click on a cell, it will select it and won't select the cell.

Also, just for your information, this is useless in your HTML so you can replace

[value]="this.careOfferingSpaceList"

with

[value]="careOfferingSpaceList"

2.) When you click on Next button, you just have to browse careOfferingSpaceList object to grab what you need :

nextAction() {
     this.careOfferingSpaceList.forEach(function(careOfferingSpace) {
       console.log('careOfferingSpaceAvailableId-spaceAvailable : ' + careOfferingSpace.careOfferingSpaceAvailableId + '-' + careOfferingSpace.spaceAvailable);
     })
}

See working Plunker

PrimeNG: Editable dataTable column

1 Answers