DataTableFilterDemo event is not triggering

UI Components for React
Post Reply
ddao
Posts: 6
Joined: 18 Nov 2020, 23:25

25 Nov 2020, 19:11

I'm using this example: https://primefaces.org/primereact/showc ... ble/filter to learn PrimeReact.

I'm able to copy the source (js, css, ...) and run it on my Suse Leap Linux box. The application runs.
However SOME of the filters don't work for me i.e. 'Status', 'Representative', 'Date' (other i.e. 'Name' and 'Activity' are working fine).
For example the filter for 'Status' doesn't seem to be triggered.
My browser is chrome and I use developer tool to see what's going on. I set the break point in 'onStatusChange' function however it didn't stop at the break point.
Am I missing something?
Any idea on how to troubleshooting this?

ddao
Posts: 6
Joined: 18 Nov 2020, 23:25

05 Dec 2020, 06:15

The example here on the primereact website
https://primefaces.org/primereact/showc ... ble/filter
doesn't work for me.

This is what I had to do. Posting here so if anyone would like to comment on the solution:
1) I has to register the onStatusChange callback as this: onChange={this.onStatusChange}
2) And in the onStatusChange callback, I have to find out the index of the array







...
this.statuses = [ 'NEW', 'REJECT', 'VALIDATE', 'APPROVE' ];

...
onStatusChange = (e) => {
if (e.value === null) {
this.setState({ selectedStatus: null });
this.dt.filter(null, 'statusId', 'equals');
}
else {
let selectedStatus = this.statuses.indexOf(e.value) + 1;
this.setState({ selectedStatus: e.value });
this.dt.filter(selectedStatus, 'statusId', 'equals');
}
}


statusBodyTemplate = (rowData) => {
return (
<React.Fragment>
<span className="p-column-title">Status</span>
<span className={`status-badge status-${this.statuses[rowData.statusId-1]}`}>{this.statuses[rowData.statusId-1]}</span>
</React.Fragment>
);
}



statusItemTemplate = (option) => {
return <span className={`status-badge status-${option}`}>{option}</span>;
}


render() {
...
const statusFilter = <Dropdown value={this.state.selectedStatus} options={this.statuses} onChange={this.onStatusChange} itemTemplate={this.statusItemTemplate} placeholder="Status" className="p-column-filter" showClear />;

return (
...
<Column field="statusId" style={{width:'8rem'}} header="Status" body={this.statusBodyTemplate} filter filterElement={statusFilter} />
...

)
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: esneider29 and 1 guest