Open Dabada opened 7 years ago
Hi, I've got the same issue and I search about a solution. Any workaround or tricks ?
What concerns me is that when clicking a checkbox you get both a checkbox and click event. should only be checkbox. As far as selected that should occur when selecting outside the checkbox because you get the checkbox event with onActivated.
@richardrooks I've got the same issue, I'll separate checkbox event and click event. I found a workaround in waiting of update.
In case, you've got the datatable :
<ngx-datatable
(select)="onSelect($event)"
(activate)="onActivate($event, modal)"
>
As the click event is running twice and the first is the checkbox event, I stop the propagation as below :
onSelect(e) {
//Do somethings...
}
onActivate(event, modal) {
const me = this;
if(event.type == 'checkbox'){
//Stop event propagation and let onSelect() work
event.event.stopPropagation();
}else{
//Do somethings when you click on rows
}
}
I guess that isn't a very good option but it make the job for now.
@khylias will give it a try now. thanks much.
When the SelectionType
is checkbox the event could be stopped to prevent activate from firing? https://github.com/swimlane/ngx-datatable/blob/89dbad5dc958b578d70d7f54d2d1320bf576c799/src/components/body/selection.component.ts#L37
Posting to see if this issue has been looked into more. On version 9.3.1 and the issue is still not fixed.
When selection is checkbox, single row click triggers activate event, and checkbox selection triggers both select and activate events. I can therefore not use checkbox to track objects while also using row selection to trigger some detail views.
Any thoughts?
@gpickney Modifying the code above from @richardrooks you can pull that off like this:
onActivate(event) {
const checkboxCellIndex = 1;
if (event.type === 'checkbox') {
//Stop event propagation and let onSelect() work
console.log('Checkbox Selected', event);
event.event.stopPropagation();
} else if (event.type === 'click' && event.cellIndex !== checkboxCellIndex) {
//Do somethings when you click on row cell other than checkbox
console.log('Row Clicked', event.row); /// <--- object is in the event row variable
}
}
No I didn't. Went a completely different route.
Richard
On Sep 29, 2017, at 11:30 AM, ccarns notifications@github.com wrote:
@gpickney Did you work out a solution for your requirement above of checkbox and row selection? That is exactly the functionality I was just googling for? Thanks for any response!
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
This approach worked for me (checkbox in first cell i.e. cellIndex = 0):
onActivate(event) {
if (event.type == 'click' && event.cellIndex != 0) {
//Do something when you click on row cell other than checkbox.
}
}
I'm submitting a ... (check one with "x")
Current behavior
When a row is selected with checkbox mode, two events are triggered :Select Event & Activate Event
Expected behavior
When a row's checkbox is selected, only the Select Event should be triggred. When a row is clicked outside the checkbox only the Activate Event should be triggred.
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
Table version: 0.7.x
5.0.0
Angular version: 2.0.x
angular-cli: 1.0.0-beta.25.5 node: 6.9.2 os: darwin x64 @angular/common: 2.4.4 @angular/compiler: 2.4.4 @angular/core: 2.4.4 @angular/forms: 2.4.4 @angular/http: 2.4.4 @angular/material: 2.0.0-beta.1 @angular/platform-browser: 2.4.4 @angular/platform-browser-dynamic: 2.4.4 @angular/platform-server: 2.4.4 @angular/router: 3.2.0 @angular/compiler-cli: 2.4.4
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 53.0.2785.101 (64-bit)
Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 2.0.3