Merge cell expand/collapse

Merge cell expand/collapse

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

• 

  weide.zhu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 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’
• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 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.