Exiting Edit mode when clicking on a button

UI Components for Angular
Post Reply
izno
Posts: 3
Joined: 06 Feb 2023, 12:02

06 Feb 2023, 12:09

Hello,

I have a PrimeNG table using the CellEdiding Function

Code: Select all

    <p-table [value]="products" dataKey="name" (onEditInit)="onEditInit($event)"   (onEditComplete)="onEditComplete($event)"   (onEditCancel)="onEditCancel($event)"
    >
    ...
       <tr>
          <td
            [pEditableColumn]="product.name"
            [pEditableColumnField]="product.comment"
            [pEditableColumnRowIndex]="product.id"
          >
          ...
I can exit from the editing mode by typing "enter" or "escape" on the keyboard.
Is there any way to do it by clicking on a button ?

Exemple available @ https://stackblitz.com/edit/primeng- ... onent.html

Thanks

Aony87
Posts: 1
Joined: 30 Jan 2023, 10:43

09 Feb 2023, 10:37

In this example, the exitButton is retrieved from the HTML document using document.getElementById, and a click event listener is attached to it using addEventListener. When the button is clicked, the code sets the contentEditable property of the body element to false, which will exit edit mode.

<button id="exitButton">Exit Edit Mode</button>

<script>
const exitButton = document.getElementById("exitButton");
exitButton.addEventListener("click", function() {
document.body.contentEditable = false;
});
</script>

izno
Posts: 3
Joined: 06 Feb 2023, 12:02

10 Mar 2023, 12:27

Thanks Aony.
Works fine

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 11 guests