1

Cross-post warning: I have also posted this in the PrimeNG Community Forum, but I need to reach the largest audience possible.

I am trying to implement Row Editing in the PrimeNG (version 7.0.4/7.0.5) TurboTable (p-table) component as demonstrated on TurboTable Row Editing.

After following the directions on that page, I keep getting this error:

Template parse errors: Can't bind to 'pEditableRow' since it isn't a known property of 'tr'. ("<ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex"> <tr [ERROR ->][pEditableRow]="rowData">

So I created a StackBlitz using the code from the PrimeNG demo (I setup the CarService and copied the Row Editing sample HTML from Github. I got everything setup and tried to run it and I am getting the same error in the demo code that I am getting in my app:

Error in /turbo_modules/@angular/compiler@7.2.8/bundles/compiler.umd.js (2500:21)

Template parse errors: Can't bind to 'pEditableRow' since it isn't a known property of 'tr'. ("<ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex"> <tr [ERROR ->][pEditableRow]="rowData"> <td> {{rowData.vin}}"): ng:///AppModule/AppComponent.html@15:16

What am I missing? Why won't this work for Row Editing?

Thanks in advance!

Cindy K.
  • 128
  • 2
  • 10

3 Answers3

3

try to update primeNG version to latest one. It works for me.

qwe123
  • 46
  • 1
  • _The latest one_ actually means the _latest pre-release version_. I got the same message on the Community forum where they specified the pre-release version number: **7.1.0-rc.1**. Who would've ever thought that to use a feature described in the normal, _released_ documentation would require using a _pre-release_ version of the software! Also, when you install an npm package with '@latest', you don't get the pre-released version unless you specify that you want to include pre-released, so there is no way I would ever have thought that's what was needed. :-/ – Cindy K. Mar 12 '19 at 17:51
  • I have updated to the specified _pre-released_ version, and yes, it now does actually work. I marked this as the answer. – Cindy K. Mar 12 '19 at 18:16
2

Has the TableModule been imported correctly? import { TableModule } from 'primeng/table';

Shal
  • 21
  • 1
  • Yes, I had imported the correct module. The solution was to upgrade to the 7.1 pre-release version. Their documentation shows the feature like it is was available already, but it is not even released yet. – Cindy K. Mar 13 '19 at 07:38
  • What is the exact version you used for primeng p-table for row edit – Soumya Gangamwar Jul 11 '19 at 09:37
1

Hi I am just trying to use Row Editing DataTable in my application but could not able to get that working...

Prine Ng : 7.1.0 also tried with 7.1.0-rc.1

Included correct Modules as well...

Don't Know What am i Missing...

vishnuk
  • 91
  • 1
  • 1
  • 5
  • Are you using the new Turbo Table (using the tag `p-table`) or the older DataTable (with tag `p-dataTable`)? Could you show an example of your code or a link to a [Stackblitz](http://www.stackblitz.com) with it? – Cindy K. Mar 23 '19 at 01:51
  • I am Using the new Turbo Table....And i am following the Row Edit documentation.... https://www.primefaces.org/primeng/#/table/edit – vishnuk Mar 25 '19 at 15:09
  • When i am clciking on the row edit i am not the row editable.... I dont Know where i am doing Wrong... – vishnuk Mar 25 '19 at 15:46
  • 1
    Add `editMode="row"` to your `p-table` element: ``. Because of a typo in the documentation text, there is no clear place that they mention you have to have it until you look down at the properties list near the bottom of the documentation page. By default, it's value is `cell`, so you have to set it to `row`. I added it to your Stackblitz and it worked perfectly! – Cindy K. Mar 26 '19 at 04:14
  • Hi @CindyK if i add filter to the row edit table... onRowEditCancel(rowData, ri) method is not working as expected.... Thanks in advance... – vishnuk Jun 18 '19 at 19:04
  • Here is the stackblitz Example https://stackblitz.com/edit/angular-gkpmqc – vishnuk Jun 18 '19 at 20:28
  • Hi @vishnuk: Based on what I am seeing in the StackBlitz, the `onRowEditCancel()` is firing, but when a filter is applied to the table, the index value for that car has changed. So when you try to reset that car's properties with `this.cars2[index] = this.clonedCars[car.vin];`, you are overwriting the wrong entry in `this.cars2` because the index of the filtered list is different than the index of the full list. Does that make sense? – Cindy K. Jun 25 '19 at 21:29