What causes the failure of $event binding when using RowGroup tables with PrimeNG?

Question

What causes the failure of $event binding when using RowGroup tables with PrimeNG?

I have successfully implemented RowGroup to store 3 different tables, which is working great. However, I am facing an issue with the onRowSelect function not functioning properly. When I click on any row of the RowGroup tables, nothing happens.

On another note, I have a separate table named "MY TABLE" which, when you click on a row, displays a pop-up with the relevant row information. This is the exact functionality I want for my RowGroup tables but I am unable to get it to work.

Check out my code here: PLUNKER

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
    [sortableRowGroup]="false" [expandedRowsGroups]="expandedGroups">
  <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
<p-column field="status" header="ID"></p-column>
<p-column field="name" header="Title"></p-column>
</p-dataTable>

javascript angular typescript primeng

Answer 1

Answer №1

Check out this functional version:
https://embed.plnkr.co/0o42Jb/

Remember to include

(onRowClick)="handleRowSelect($event)"

and

handleRowSelect(event) {
   console.log('Excited!');
   this.display = true;
   this.personData = event.data.name;
}

Answer 2

Check out this functional version:
https://embed.plnkr.co/0o42Jb/

Remember to include

(onRowClick)="handleRowSelect($event)"

and

handleRowSelect(event) {
   console.log('Excited!');
   this.display = true;
   this.personData = event.data.name;
}

Answer 3

Answer №2

Sure thing! When working with your external table called "MY TABLE", make sure to utilize the onRowClick event binding instead of the onRowSelect event.

In your app.template.html:

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
        [sortableRowGroup]="false" [expandedRowsGroups]="expandedGroups" (onRowClick)="handleRowSelect($event)">
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
    <p-column field="status" header="ID"></p-column>
    <p-column field="name" header="Title"></p-column>
</p-dataTable>

And in your app.component.ts:

handleRowSelect(event) {
    //event.data = Selected row data
    this.display = true;
    this.personData = event.data.name;
}

For more information, check out the ngprime docs event section.

Answer 4

Sure thing! When working with your external table called "MY TABLE", make sure to utilize the onRowClick event binding instead of the onRowSelect event.

In your app.template.html:

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
        [sortableRowGroup]="false" [expandedRowsGroups]="expandedGroups" (onRowClick)="handleRowSelect($event)">
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
    <p-column field="status" header="ID"></p-column>
    <p-column field="name" header="Title"></p-column>
</p-dataTable>

And in your app.component.ts:

handleRowSelect(event) {
    //event.data = Selected row data
    this.display = true;
    this.personData = event.data.name;
}

For more information, check out the ngprime docs event section.

What causes the failure of $event binding when using RowGroup tables with PrimeNG?

Answer №1

Answer №2

Similar questions

Determine the time difference between two dates, taking into account Daylight Saving Time adjustments

What causes the sudden disappearance of the returned value from AJAX?

Dynamic updating of scores using Ajax from user input

Is there a way to assign a variable as the value for the jQuery .attr method?

Incorporate a PHP-generated array into JavaScript

Best practice for including Angular in the list of dependencies for an npm library

The quantity of elements stays constant even after adding to them using Javascript

Is there a way to integrate a MySQL database with parcel-bundler in a Node.js environment, or is there a simpler method to achieve this database integration with parcel-bundler?

Undefined output in Typescript recursion function

Tips for attaching event listeners to custom elements

Arranging the data in the table by alternating rows using Datatables

The class is failing to be applied to the parent div that holds an id starting with the letter x

Leveraging props to set the initial value of component data in Vue 3 Composition API

Change the class of the div when the first div is selected

What is the best way to ensure that posts made with Contentlayer stay dynamic for future posts on Vercel?

Struggling to integrate authentication and authorization features into a ReactJS application with Microsoft Azure AD or Database login functionality

Ajax cannot seem to come to a resolution

Efficient Checkbox Implementation in ActiveAdmin for Rails 3.1

Troubleshooting: Why Your Angular Data Binding is Failing

What is happening with the arrangement of $scope in Angular 1.x?