Nested table expand/collapse on row click

Posted by: jmisquez on 30 May 2022, 7:58 pm EST

  • Posted 30 May 2022, 7:58 pm 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:



  • Replied 1 June 2022, 12:52 am EST

    Hello,

    Please refer to the sample link below demonstrating, how to add a custom expand/collapse icon on a column using templates:

    https://stackblitz.com/edit/angular-dc9ept?file=src%2Fapp%2Fapp.component.html

    Let us know if this works for you.

    Regards
  • Replied 1 June 2022, 5:10 pm EST

    I want to expand/collapse the nested grid when i click on the row, also i want to show a custom icon and i want that the entire row change color on hover and selection.

    so im facing 3 issues:

    1.- the RowHeaders doesn't change color on Selection / Hover, example:


    Is there a way to change the Color of the RowHeader?

    2.- I want to expand or collapse the Row on Selection change, so the expected behaviour is to click in any place in the Row and expand or collapse the Details i already try with the gridClickHandler but when i try to use that i cannot use the "ExpandSingle" and i can open more than one RowDetails at the same time.

    3.- I want to focus to the current Row that is showing the details, scroll down or up to make the Selected Row to looks like the it was a Header / First Item of the grid.

    btw, the custom icon help me to change the +/- icon and use caret, thanks for that one
  • Marked as Answer

    Replied 6 June 2022, 3:16 pm EST

    Hello,

    We apologize for the delayed response, you may refer to the sample link below demonstrating the above points:

    https://stackblitz.com/edit/angular-vmmbqc?file=src%2Fapp%2Fapp.component.ts

    Please let us know if you have any doubts.

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels