Angular 8 - primeNG table - set all cells editable by default

Question

I didn't find any info about how t set all cells editable by default in template.

My template:

 <p-table
      #docDataTable
      [value]="dataValues.values"
      dataKey="id"
      [lazy]="true"
      [paginator]="false"
      [rows]="2"
      [totalRecords]=""
      [sortField]="'createdOn'"
      [sortOrder]="-1"
      scrollHeight="calc(100% - 10px)"
      [style]="{width:'100%'}"
      editMode="row"
      [responsive]="true"
      [columns]="tableColumns">

<ng-template pTemplate="body" let-rowData let-columns="tableColumns" let-editing="editing"
                   let-rowIndex="rowIndex">
  <tr [pEditableRow]="rowData">
<td *ngIf="dataValues" class="ellipsis" pEditableColumn>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <editor
                  class="document-tag__editor"
                  [(ngModel)]="rowData.description"
                  [init]="{
                base_url: '/tinymce',
                suffix: '.min',
                inline: true,
                height: 500,
                menubar: false,
                toolbar:
                  'subscript superscript'
                }"></editor>
              </ng-template>
              <ng-template pTemplate="output">
                {{removeAllHtmlTagsFromString(rowData.description) | truncateValue: 40}}
              </ng-template>
            </p-cellEditor>
          </td>

Is it possible? I don't want to click on a cell first to enable edit mode... Edit mode should be enabled by default... I know how to do that in component/programatically, but it works slowly:

this.dataValues.values.forEach(row => this.docDataTable.initRowEdit(row));

Answer 1

From Prime NG documentation about Tables, in the Row Editing section. (https://www.primefaces.org/primeng/table)

Moreover, you may use setting pEditableRowDisabled property as true to disable editing for that particular row and in case you need to display rows in edit mode by default, use the editingRowKeys property which is a map whose key is the dataKey of the record where the value is any arbitrary number greater than zero.

Answer 2

Ok it's an old question but I have the answer: maybe I can help next ones having the same problem.

The property editingRowKeys as pointed by Joe Mtz is the way: it's a map of (row) ids with a boolean value for editable (or not). So in your case, if your dataKey id is a string, and you have 'keyOne' and 'keyTwo' your code should be something like this

editingRowKeys: { [id: string]: boolean } = {}; 
editingRowKeys['keyOne'] = true;
editingRowKeys['keyTwo'] = true;

Answer 3

You can use @ViewChild. Below code worked for me

component.ts

import { Table } from 'primeng/table';

@ViewChild(Table)
private dataTable!: Table;


public onRowEditInit(data:DataModel) {
        this.dataTable.editingRowKeys = {[data.id]:true}
}