Recently, I’ve been working on implementing a functionality that triggers when a checkbox within a datatable is clicked. The scenario involves a default set of values displayed in the table (ranging from 1 to 10). Additionally, I provide an array of selected items to the component based on my own object (such as 2 and 5). As the grid is constructed, all default elements appear in the DataTable, but only those from our selection are marked with checked checkboxes.
The objective is to have an addOrRemove function execute accordingly; depending on the checkbox status, it should either include or exclude a default data object from the array (e.g., [2,5]). Upon unchecking 2 or 5, they should be removed from the array, while checking others like 1, 3, 4, 6, 7, 8, 9, 10 would add them.
Though capable of writing the necessary code, I face challenges in ensuring my function is invoked upon checkbox press. Below is how the checkbox is defined in the HTML file:
<p-column header="Included" [style]="{'width':'80px', 'text-align':'center'}">
<template let-object="rowData" pTemplate="body">
<p-checkbox binary="true" [(ngModel)]="object.included" (change)="addOrRemoveRow($event,object.data)"></p-checkbox>
</template>
</p-column>
Despite configuring the checkbox this way, the functions do not trigger as expected. The PrimeNG documentation mentions the event onChange for p-checkbox, but using it results in an error:
EXCEPTION: Error in http://localhost:3000/app/shared/grid/checkable-grid/checkable-grid.component.html:9:12 caused by:
self.parentView.context.addOrRemoveRow is not a function
It appears that changing (change) to (onChange) is problematic due to the checkbox being located inside a template, limiting direct access to the component and its functions. Any assistance on this matter would be greatly appreciated.