CODEWITHSUNDEEP
angularprimeng
Cosmin Ionascu
Cosmin Ionascu

Reputation: 7518

PrimeNG Datatable - disable cell editing for specific rows

Please have patience with the long post.

I have an editable datatable using PrimeNG and Angular2, similar with their example:

<p-dataTable [value]="cars" [editable]="true">
   <p-column field="vin" header="Vin" [editable]="true"></p-column>
   <p-column field="year" header="Year" [editable]="true"></p-column>
   <p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
       <template let-col let-car="rowData" pTemplate="editor">
           <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
       </template>
   </p-column>
   <p-column field="color" header="Color" [editable]="true"></p-column>
   <p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
       <template let-col let-car="rowData" pTemplate="body">
            {{car[col.field]|date }}
       </template>
       <template let-col let-car="rowData" pTemplate="editor">
           <p-calendar [(ngModel)]="car[col.field]"></p-calendar>
       </template>
   </p-column>
</p-dataTable>

*My table has all the columns with templates because I need to set a custom CSS if the cell has errors.

Let's suppose we have the field Price.

<p-column field="price" header="Car Price">
    <template let-col let-car="rowData" pTemplate="body">
         <span [ngClass]="{'error':car['hasError']}">{{car[col.field] }}</span>
    </template>
</p-column>

I need to set [editable] property for this column, but this also needs to be row independent (for each cell in the Price column), e.g. a Price cell can be editable only for cars that have Audi selected as Brand.

I have tried adding contentEditable={customCondition} and it is not working, also the [editable] property disables the editing on the entire column, not on the specific cell.

Any help or suggestions are highly appreciated.

Upvotes: 2

Views: 9444

Answers (2)

Shubhashish Mishra
Shubhashish Mishra

Reputation: 488

I am in agreement with what karthiks3000 explained. However, if you want to no effect to be seen( the dropdown with disabled seen when you click on the cell), you could use *ngIf which remove the editor template based on the value.

For example:

<p-column [style]="{'width':'200px','overflow':'visible'}" [editable]="true" field="default_policy" header="Default Policy">                     
               <template let-col let-car="rowData" pTemplate="body">
                   {{car[col.field]}}
                </template>
                <template let-col let-car="rowData" pTemplate="editor">
                    <p-dropdown *ngIf="!car.editable"  [(ngModel)] = "car.default_policy" [options]="policyEditList" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                </template>                       
            </p-column

Upvotes: 0

karthiks3000
karthiks3000

Reputation: 912

I assume you want to control when a cell becomes editable based on some other condition. I had a similar problem which I was able to resolve by controlling when the control within the template becomes editable The dropdown becomes editable only when the property "editable" is set to true of a row. Hope this helps...

Here is my example -

<p-column [style]="{'width':'200px','overflow':'visible'}" [editable]="true" field="default_policy" header="Default Policy">                     
               <template let-col let-car="rowData" pTemplate="body">
                   {{car[col.field]}}
                </template>
                <template let-col let-car="rowData" pTemplate="editor">
                    <p-dropdown [disabled]="!car.editable"  [(ngModel)] = "car.default_policy" [options]="policyEditList" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                </template>                       
            </p-column>

Upvotes: 1

Related Questions