Grid Footer for Totals and Group Footer for Subtotals

Grid Footer for Totals and Group Footer for Subtotals

Posted by: smerickson on 14 September 2017, 11:11 am EST

• 

  smerickson

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:11 am EST

  It doesn’t look like FlexGrid supports a “grid footer” for displaying overall totals. Would it be possible for one to instantiate an additional “GridPanel” for footer totals and position it fixed at the bottom of the grid? Ideally it would always stay visible just like column headers, but this would be for column footers.

  Additionally, I’m also working on subtotals as footers of a grouped section. What would be the best way to manufacture rows at the bottom of each group in order to display subtotals?

  I’m fine with doing the aggregate calculations in my own code. I’m mainly looking for how to manufacture these new rows for displaying them in the grid. Thanks.

  I’m using pure JS, not Angular.

• 

  smerickson

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Any suggestions? Thanks.

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Another pair of good questions.

  I think it should be relatively easy to use a second grid to show the subtotals, rather than a child GridPanel. The only trick would be to keep the scroll position and column layouts in sync, but that should be easy. I will try to provide a sample (this one is easier than the custom editors ;-))

  Also, you should be able to add your own group rows below each group of cells. You would have to do this after any changes to the grid’s collectionView. Again, I will try to create a fiddle to demonstrate.

  Thanks for your patience and for the great questions.

• 

  smerickson

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Thanks. I really appreciate the help.

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  OK, I finished a sample that shows how to add custom group footers and also a grid footer. Both are implemented as directives and can be used independently.

  The sample is not public yet, so I am is attached here. If you have any feedback, I’d love to hear it before we publish it.

  Thanks again for the suggestion/request, for your patience, and for any feedback you provide.
  
  2014/11/CustomFooters.zip

• 

  smerickson

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Thanks so much! This is working great in my grid.
  
  

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Nice! Thanks for the feedback too, it’s great to know the sample helped!

• 

  murali-424

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Hi,

  Thanks for the sample. I was able to integrate your code to my application and got it working. However, I noticed a problem with row filtering.

  I was able to display the grand total of each column in the footer grid, which is absolutely working fine. But, when I apply row filtering, the summary values are not getting changed based on the values currently displayed in the grid. Do you know how to refresh summaries upon row filtering?

  Attached the snapshot for your easy reference. Thank you in advance!
  
  

• 

  manpreet-kaur

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:11 am EST

  Hello,

  You can handle the collectionChanged event of the master FlexGrid collectionView, so as to update the footer values when the user applies filtering in the master FlexGrid.

  Kindly refer to the attached sample which implements the same. Hope it helps.

  Thanks,
  
  Manpreet Kaur
  
  2015/09/CustomFooters_Filter.zip

• 

  muddam.kranthi

  • Post Options:
  • Link
    Copy

  Posted 30 September 2020, 3:28 am EST - Updated 3 October 2022, 3:30 pm EST

  HI Team,

  I am using angular and want to achieve as below in wijmo grid.

  

  On load of grid Consolidated rows for (Projected, Initial, Final) notice type to be displayed.

  And on click of expand (+) link all the details related to Consolidated to be displayed as in 2nd screendhot.

  The screenshots are just wireframes. I have implement in angular as per screenshot.

  Thanks,
  
  Kranthi

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 October 2020, 1:48 am EST

  Hi,

  We have replied to your query on the forum post below:

  https://www.grapecity.com/forums/wijmo/consolidated-grouped-rows-