Posted 30 May 2022, 7:58 pm EST - Updated 3 October 2022, 2:56 am EST
Im trying to expand/collapse wjFlexGridDetail on row click but i cannot find a way to make it work, also i dont want the row header i want to make looks like normal color, something like this:
the issue is that the ExpandSingle doesnt work because im handling the expand/collapse with a gridClickHandler event:
html
<wj-flex-grid
#flex
[itemsSource]="flexData"
[isReadOnly]="isReadOnly"
[alternatingRowStep]="alternatingRowStep"
[showMarquee]="showMarquee"
(initialized)="flexInitialized(flex)"
(selectionChanged)="onSelectionChanged()"
(click)="gridClickHandler($event,grid)"
[itemFormatter]="itemFormatter">
.ts
public gridClickHandler(e: any, grid: any) {
if (!this.flexGridDetail) return;
const ht = grid.hitTest(e);
const isButton = ['wj-cell-maker', 'fa'].some( (className: string) => ht.target.classList.contains(className));
if (!isButton) {
if (this.flexGridDetail.isDetailVisible(ht.row) && this.flexGridDetail.isDetailAvailable(ht.row)) {
this.expandedRow = null;
this.flexGridDetail.hideDetail(ht.row);
} else {
this.expandedRow = ht.row;
this.flexGridDetail.showDetail(ht.row);
}
}
}
the issue with the code above is that the row.index increase when the rowDetail is displayed, so the row doesnt match as expected.
so i want to make it that only one row can be visible at a time and make handle the toggle on row click, also i want to color the entire row when i hover or select, so if i add the rowHeader it doesnt color, i dont want this:
