merge cell expand/collapse

Posted by: weide.zhu on 7 September 2021, 12:28 pm EST

  • Posted 7 September 2021, 12:28 pm EST

    hi,

    We are using Wijmo Angular Flexgrid's merge cell feature - https://www.grapecity.com/wijmo/demos/Grid/Merging/CellMerging/angular

    We have a requirement to let user collapse/expand the merged cell, is there any way to achieve it?

    one more question, how to change the styling of the merged cell?

    Thanks and Regards,

    Weid
  • Replied 7 September 2021, 8:51 pm EST

    Hello,

    1. Yes, you can achieve the desired result by adding plus and minus glyphs to the merged cells using the formatItem event of FlexGrid, after which you can expand and collapse the merged cells by toggle the visible property of the rows. Please refer to the sample link below demonstrating the same:

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

    2. To change the styling you can add a CSS class to the merged cells and use that class to perform the styling on the merged cells. Please refer to the sample link above for reference.

    Let us know if that's works for you.

    Regards
  • Replied 8 September 2021, 4:07 pm EST

    great, thanks for your help, it looks good.

    in order to meet our requirements, would it be possible to achieve those two?

    1. move the expand/collapse buttons to the row header
    2. when in collapsed state, I want to show a generic text instead of the first row's data.
    E.G, for country 'Japan', then it is in collapse state, the sales displays '(...)' instead of '12962.56'
  • Marked as Answer

    Replied 9 September 2021, 9:59 pm EST

    Hello,

    Yes, it's possible to achieve the above requirements. Please refer to the following points below:

    1. At first, to make row headers cells range as the country column you need to provide a custom merging to the rowHeaders cell by extending the MergeManager Class. After which you may use the formatItem event and add the expand/collapse icons to the rowHeaders.

    2. On expand collapse of the rows you may call set the cell value(display value). Please refer to the sample link below demonstrating both:

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

    Let us know if that's works for you.

    Regards
  • Replied 11 September 2021, 11:57 am EST

    that works like a magic, really appreciated for your help! Love the high quality of wijimo's support.
Need extra support?

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

Learn More

Forum Channels