Primeng: TurboTable edit events lack documentation

[andreihaiducu]

I'm submitting a ... (check one with "x")

[ x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/QfYQwbVKJ5pUusHL97sE?p=preview

Current behavior

Hi!
I used primeng DataTable and now I want to migrate to primeng TurboTable. The problem is : TurboTable does not trigger onEdit callback. And also onEditComplete does not show an event like the one that is shown by DataTable. Also all edit events show the same event as onEditComplete on TurboTable events.

Expected behavior

The event triggered should be like the one triggered by the DataTable

Minimal reproduction of the problem with instructions

If you open the console in the plunker, you can see the events that are logged by DataTable and the ones that are logged by TurboTable.

Event emitted by DataTable onEdit :

column: Column {filterType: "text", exportable: true, resizable: true, sortFunction: EventEmitter, template: undefined, …}
data: {brand: "VW", year: 2012, color: "Orange", vin: "dsad231ffs"}
index : 0
originalEvent: InputEvent {isTrusted: true, data: "s", isComposing: false, inputType: "insertText", dataTransfer: null, …}

Event emitted by DataTable onEditComplete:

column: Column {filterType: "text", exportable: true, resizable: true, sortFunction: EventEmitter, template: undefined, …}
data : {brand: "VW", year: 2012, color: "Orange", vin: "dsad231ffs"}
index: 0

Event emitted by TurboTable onEditComplete :

data : ""
field : undefined

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Mac OS High Sierra Version 10.13.2 , Visual Studio Code

• Angular version: 4.2.2
  

• PrimeNG version: 5.2.0-rc.2
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome Version 63.0.3239.132

• Language: [all | TypeScript X.X | ES6/7 | ES5] : Typescript 2.3

• Node (for AoT issues): node --version = Node v8.9.3

[dragosheroiu95]

++

[el7lme]

Same issue

[brunoassistbe]

Same issue

[AMcManigal]

Same issue

[StanislavDovgusha]

Same issue

[guimabdo]

Also, while DataTable emits onEditComplete event when tabbing from an edited cell, TurboTable won't.

[PaulAGH]

Same issues using the released 5.2.0. onEditInit also does not provide event data.

[thejimgaudet]

Same issue. Wondering how to enable inline editing using the new Turbo Table.

[Mr230268]

Same issue. Started migrating but stopped it. Didn't find a way to catch any change of a row in an appropriate way.

Has someone an idea?

[guimabdo]

While onEditComplete isn't working, I'm using some events directly on the input:

<ng-template pTemplate="body" let-item>
                    <tr>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input (blur)="save({ data: item })"
                                           (keydown.tab)="save({ data: item })"
                                           (keydown.enter)="save({ data: item })">
                                </ng-template>

[PaulAGH]

Thank you guimabdo. That is a good technique to keep in mind for situations such as this.

I dug into the PrimeNg code, and found that pEditableColumn and pEditableColumnField are being emitted in the event. The problem is that they have not been set to anything and remain undefined. Another workaround is just to set these in our template, and whatever we set there will be passed into the event. For example

....

where
this.cols = [
{field: 'id'},
{field: 'fieldName1'},
{field: 'fieldName2'},
....
];

and "item" represents a table record

[cagataycivici]

Seems documentation lacks the necessary information, to get the data and field at onEditComplete, you need to define it as;

<td [pEditableColumn]="rowData" [pEditableColumnField]="'year'">

I've added this to the docs now, finally about onEdit, actually there is no edit since we can't properly catch the edit event, it can be with mouse or with keyboard, so in your custom editor, you can use the event you like such as keyup, change, blur to know about when the data is edited. TurboTable provides edit events related to the state of the cell including;

• onEditInit: Cell becomes editable
• onEditComplete: Enter key causes cell to switch to readonly mode
• onEditCancel: Escape key causes cell to switch to readonly mode so you can reset the model if required.

[send2sunil]

Hello Guys,
Started using p-table today. has anyone implemented a checkbox inside it so far. I tried but it doesn't even show up. Am using pEditableColumn. Any help with regard to it is appreciated.
Regards,
SV

[dragosheroiu95]

Try using checkbox from prime ng inside editable column. Should be
something like p-checkbox> ....

On Mon, May 21, 2018, 21:37 send2sunil [e-mail] wrote:

Hello Guys,
Started using p-table today. has anyone implemented a checkbox inside it
so far. I tried but it
doesn't even show up. Am using pEditableColumn. Any help with regard to it
is appreciated.
Regards,
SV

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/primefaces/primeng/issues/4962#issuecomment-390743571,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATIqKHRM8GEB-9y7en6EuqbOPGubMPQiks5t0wlZgaJpZM4Rr1N8
.

[send2sunil]

Hi @dragosheroiu95 ,
thanks for your reply. I tried below.
https://www.primefaces.org/primeng/#/checkbox
Do you have any samples anywhere which shows the right behaviour for this inside p-table with some sample data. I didn't find any samples for this in google too. I am able to show textbox as shown in primeng samples but not other controls.

Regards,
SV

[dragosheroiu95]

 <td style="width: 2.25em; text-align: center">
                      <p-checkbox (onChange)="updateCaseCommandJob(rowData, providerInvoiceTable)" binary="true" [(ngModel)]="rowData.comission"></p-checkbox>
                    </td>

[send2sunil]

hi @dragosheroiu95,
Thanks for that. that worked. you are awesome!

Regards,
SV

[hasmukh]

@cagataycivici If may I ask where is the doc of editing primeng p-table ? Its very tough to work with it.
I meant for this comment https://github.com/primefaces/primeng/issues/4962#issuecomment-370441228

[andreihaiducu]

All the docs are in the official site primeng. Go to turbo table and search in the page editable column field or something like that. The docs are there. You just have to find them. PaulAGH replied in this thread something that should help you. Good luck!