Open shinobiwarrior opened 6 years ago
I am having this issue as well. @shinobiwarrior Were you able to solve this?
Not yet, I'm still waiting for an answer here, and as I had a lot of work on my other projects, I couldn't spend time on this
ok. I am busy as well. I will leave it like this until I get a chance to look at it.
I am also facing this issue. any update on this ?
Nothing on my side...
Same here 😢
Not sure but problem could be in header.component.ts
(also in body-row.component.ts
):
calcStylesByGroup(group: string): any {
const widths = this._columnGroupWidths;
const offsetX = this.offsetX;
const styles = {
width: `${widths[group]}px`
};
if (group === 'center') {
translateXY(styles, offsetX * -1, 0);
} else if (group === 'right') {
const totalDiff = widths.total - this.innerWidth;
const offset = totalDiff * -1;
translateXY(styles, offset, 0);
}
return styles;
}
I saw, that offsetX does not have limit value, e.g. totalDiff?
Same problem here
It not best solution but it work for me.
In component.html
.
.
.
<ngx-datatable
#myTable
class="bootstrap expandable"
[rows]="dataList"
[groupRowsBy]="'group'"
[rowHeight]="'auto'"
[columns]="columns"
[loadingIndicator]="loading"
[scrollbarH]="true"
[groupExpansionDefault]="false"
>
<ngx-datatable-group-header [rowHeight]="50" #myGroupHeader >
<ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
<div style="padding-left: -15px;">
<a
[class.datatable-icon-right]="!expanded"
[class.datatable-icon-down]="expanded"
title="Expand/Collapse Group"
(click)="toggleExpandGroup(group)">
<b>{{group.value[0].group}}</b>
</a>
</div>
</ng-template>
</ngx-datatable-group-header>
.
.
.
In component.ts
@ViewChild('myTable') table: any;
public onToggleExpandGroup(group) {
setTimeout(() => {
this.table.bodyComponent.scroller.scrollWidth = this.table.bodyComponent.innerWidth;
}, 500)
this.table.groupHeader.toggleExpandGroup(group);
}
Hi is there a way to fix this? I still get this problem and I noticed it still occurs even on the swimlane site for the row grouping table example. @kaluginserg
Hai i'm facing same ,any updates on this issue
I'm having the same issue with grouping and scrollx: true. After several tries, i found out this solution :
Use the .wrap tag in jquery to append a div with overflow-x: scroll to your table in the InitComplete function
var tableSettings = {
dom: "Blfrtip",
... (All other settings)
initComplete: function () {
$('#productRefundCostTable').wrap('<div style="overflow-x: scroll;">');
}
};
I'm submitting a ... (check one with "x")
Current behavior
If you have row grouping and horizontal scrollbar enabled at the same time, it generates an infinite scrolling, adding blank space to the right.
Expected behavior
The table should scroll only the actual width
Reproduction of the problem
http://plnkr.co/edit/QpQthGIGIreYTZOH42Tn
What is the motivation / use case for changing the behavior?
I want to group the rows, and also be able to scroll horizontally
Please tell us about your environment:
Debian 8, VS Code, Angular CLI