More complete support for grouping and footer row totals

[arthur-clifford]

If this is a request better directed to a slick grid repo please let me know the recommended issue tracker to repost to.

I'm submitting a Feature request

Motivation / Use Case

Grouping technology is a step in a good direction but leaves a bit to be desired. In particular I'm allowing a user to enable summaries for count, sum, min, max, first, last, average, median, and standard deviation and while aggregators are supported and generally work for my total objective I've hit snags that have made progress harder than it should have been.

I've enabled column menu options for toggling on/off aggregators for each column and if a user wants to apply all of them I don't want to stop them.

My first hurdle was that there is no notion of un-grouped data being a whole-population group. This is problematic in that the aggregator support for groups and groupings work great for grouped data but for a totals row I have to roll my own routine for aggregating the data in the table to get the affect of the grouping tech aggregation. Not a major deal, but a bummer.

The totals row and the group totals row have the same problem in that they think there is only one or two aggregators that will ever be applied.

I had to create a routine tat based on the number of active aggregators applied adjusting the height of the footer row so I can support multiple rows of label value pairs for the total from each aggregator.

However, when multiple aggregators are applied at the grouping level the multiple rows of output are truncated at the standard row height. I can set the css for the group totals cells to be: height: auto-fit. And when I do that, they still get truncated but at least if you mouse over them the data shows even though it comes up over the row below.

There is no way that I can see from within the group totals formatter or anywhere else to adjust the rowHeight of the group totals row.

Being able to set the css for group totals row is not useful as I need to se the height unless it can be set as a function call to where I can dynamically send back height: {mydatahere}px; for it to be added tot he group totals row style attribute. I can of course globally set the slick-group-totals css style but that's not helpful as I need things to be relatively dynamic, which is to say I need my group totals height to be dynamic based on the aggregators set as opposed to per-item-dynaimc. I understand that supporting virtual scrolling means you need to be able to compute height, I'm not asking to be dynamic to the point of breaking that.

Lastly, and I haven't confirmed there isn't an ability to do this yet, I noticed that, exporting to excel when I had html formatted group totals I got the html in the excel output. I will need to work out a way, if possible, to provide different output on export for the group totals row to excel.

The feature request then is to consider rounding out the grouping and totals tech with the following:

• adding height: fit-content' to the css definition for group totals row cells.
  This should be done as a minimum because at least a user can click on a cell to see any values that are clipped by the following row.
• adding totalsHeight or totalsStyle property for the group definition
• when present incorporate the provided style or height to the appropriate element in the html
• account for the specified height or computed outerHeight of said element in the virtual scroll row height calculations.
• supportting the footer totals better by applying the aggregators defined for columns in the totals footer row computation providing the same groupTotals info to the footer totals formatter with the caveat that the rows in the 'group' is the full dataset (total population).
• providing an exportGroupTotalsFormatter or better named function that allows us to provide excel friendly output for group totals.
• allowing aggregators to be used in both group totals and footer totals and allow the aggregators to receive an optional aggregationContext or aggContext parameter so that an aggregator may choose whether it makes sense to include its totals in a given context. (Note: computing standard deviation on a grouped field is sort of useless, where as population min vs sample/grouped min makes sense)

Expected Behavior

I should be able to enable aggregators for a column that cause the aggregated values to be included in the totals and/or the group totals such that all aggregated values are reported as totals and exporting to excel should not end up with html formatting required to make things look good in the grid.

Other Information

My requests/recommendation may come from a particular approach I'm attempting. But slickgrid is allowing multiple aggregators to be defined and so only being able to display totals for two cannot be the long term intention.

[ghiscoding]

There's a lot to read in your request... here's some replies

• a group row is like any other grid row, you can't change it's height dynamically, you can only set it once in your grid options via rowHeight
  • dynamic row height as been asked over and over, just google it and you'll see a few results (the short answer is it's not possible because it's using <div> with CSS. just Google it and you'll see some of the answers...
• there's very little SASS variables for grouping and here they are
  

  Angular-Slickgrid/src/app/modules/angular-slickgrid/styles/_variables.scss

  Lines 232 to 235 in 7219249

  	/* Grouping Totals Formatter */
  	$group-totals-formatter-color: gray !default;
  	$group-totals-formatter-bgcolor: #fff !default;
  	$group-totals-formatter-font-size: 14px !default;

• the Grouping feature comes directly from SlickGrid itself, you can see SlickGrid Grouping Examples and this first demo Grouping Example is the exact demo of Angular-Slickgrid Example 14 - Grouping
• the Footer is totally independent from Grouping, when I built that piece it was only intended to show how many items are in the grid and how many are filtered out. It has no knowledge of Grouping whatsoever, you can however customize the left side of the Footer, so you could add any Grouping info you want on the left part
  • perhaps you can contribute to add Grouping info in the Footer or simply create your own Footer
• the Excel Export (and Text File Export) are WYSIWYG (What You See is What You Get), if your groups are all collapsed then they will be collapsed in the export as well, if you move a column in the grid it will also be moved in the export, ...
• the Excel Export is just adding a small arrow icon (open/close which is customizable) on the group with indentation on the child items, it's nothing more and I already spent a lot of time on the subject
  • if you want to add more functionalities, like real Excel Grouping, then go ahead and contribute your change of ExcelExportService
• the Grouping Aggregators are the simple ones (min, max, avg, sum) but I think you can add your own Aggregators, the list is here, I added a few more in my other lib here
• to change how the Grouping are shown, just use a custom Grouping Formatter, all built-in Formatters are here

So not everything that you asked for can be done, the Grouping feature comes from SlickGrid itself, I have created the Footer but it doesn't include anything about Grouping and if you want to Contribute then that would really great. You can ask those kind of questions on SlickGrid but don't expect anyone to reply or do the work for you, these are all Open Source libs and we all have a daily job and the reality is that this lib is a Team of 1 (myself) and I unfortunately have no extra time to add such features, I can however surely provide guidance in contributions.

in short, I'm totally open for contributions

[arthur-clifford]

Hello Ghislain, There are examples of people adjusting row heights out there, but they are the row’s height and not the totals row because the totals for a group is handled separately Can SlickGrid's row height be dynamically altered? - Stack Overflow I know that what I’m writing is wordy but I ask that you bear with me a little longer. I’m attempting to attach an image to this reply with an in-progress implementation of aggregator tech: The styling of the summaries is awful at the moment, but it should reveal what is driving this request. 1) I have 4 aggregators applied to two of the columns 2) The totals footer row has adjusted to fit the totals. I do this by determining the max number of aggregators applied and using jquery: $('.slick-viewport').css('max-height', newHeight); $('.slick-footerrow-columns').css('height', `calc(${maxAggs} * 32px)`); // note newHeight is computed earlier 3) Whatever aggregators applied to a column are also applied to the grouping totals if the column is grouped. 4) You may also note that a std distribution indicator is displayed next to each value when standard deviation is calculated. 5) Note the grouped totals is cropped for the first record. 6) I set the height for cell content for the groups total to be height: fit-content;. As a result, if you look at the record in the second group, I’ve clicked on the group total and so hit appears above the row below. If I do that for the last record there isn’t enough room to see everything. So, I know I’m pushing aspects of the tech beyond where it may have been inteded, but like other folks I’ve gotten it to do most of what I need it to do and it is a point of frustration that the group totals row can’t have a static height that is different than the data row that may or may not be different than the grouping title and yet somehow this is possible and still scrollable: I’m going to share some thoughts below for clarity and for myself for later, for you, or for anybody who may be interested in taking on this request. I’m not trying to be antagonistic or expect anything from anybody, but I cannot be the only one that thinks that some of this should be possible. The reason row heights have to be static heights is because of the virtual scroll calculation. However, if a row is the group totals row then it is essentially a section within the row and if the height is constant for all groups then its height should be reliable to use in the virtual scroll calculation. This should not be very different from: 6pac.github.io/SlickGrid/examples/example16-row-detail.html It allows for an item detail that essentially adds a larger row for providing more detail about the data in the row. The height of the detail row presumably is constant for all items. In spite of being a different height, it doesn’t impede scrolling or require constant heights for all content. Rather than a constant height detail row that I can do anything I want in, I want the group totals row to be a detail row that is based on the height of the maximum number of aggregators applied for the current set of columns and which still has columns populated by calls to the groupTotalsFormatter specified for the group. Think of it is a group details row with cell-level detail. With that in mind, what I’m looking for is something like the functionality of the detail view (being collapsible in fact would be a nice touch) that would allow me to either specify a height or to have a callback to return a height based on aggregators I’ve set. As to the footer. What I’m pointing out is that the footer too can be a table detail row with columns matching the rest of the table working nearly identically to the notion above of a group detail row. As to “dynamic” height, to be clear what I mean is I would like, using the detail row as an example, is to be able to set a different height for that kind of row when my number of aggregators changes so that I can subsequently refresh the grid it renders with the new height. I DO NOT necessarily want variability in those heights for the same rendering. How difficult would it be to implement the notion of grouping and table detail views and to have an option to populate them with cells that would line up with the rest of the grid and stay in sync when column widths change? I imagine the task would require studying the existing item detail view and then adapting it for groups and/or the table. My questions would be how does the grid account for the detail view’s height when calculating the virtual scroll. Would you know or be willing to point out the scripts that would be most beneficial to understand/study for such a task?

…

-Art Sent from Mail for Windows 10 From: Ghislain B. Sent: Wednesday, February 24, 2021 6:49 AM To: ghiscoding/Angular-Slickgrid Cc: arthur-clifford; Author Subject: Re: [ghiscoding/Angular-Slickgrid] More complete support for grouping and footer row totals (#703) There's a lot to read in your request... here's some replies • a group row is like any other grid row, you can't change it's height dynamically, you can only set it once in your grid options via rowHeight o dynamic row height as been asked over and over, just google it and you'll see a few results (the short answer is it's not possible because it's using <div> with CSS. just Google it and you'll see some of the answers... • there's very little SASS variables for grouping and here they are https://github.com/ghiscoding/Angular-Slickgrid/blob/7219249d99f63f839c19ae7d37191945b74d1215/src/app/modules/angular-slickgrid/styles/_variables.scss#L232-L235 • the Grouping feature comes directly from SlickGrid itself, you can see SlickGrid Grouping Examples and this first demo Grouping Example is the exact demo of Angular-Slickgrid Example 14 - Grouping • the Footer is totally independent from Grouping, when I built that piece it was only intended to show how many items are in the grid and how many are filtered out. It has no knowledge of Grouping whatsoever, you can however customize the left side of the Footer, so you could add any Grouping info you want on the left part o perhaps you can contribute to add Grouping info in the Footer or simply create your own Footer • the Excel Export (and Text File Export) are WYSIWYG (What You See is What You Get), if your groups are all collapsed then they will be collapsed in the export as well, if you move a column in the grid it will also be moved in the export, ... • the Excel Export is just adding a small arrow icon (open/close which is customizable) on the group with indentation on the child items, it's nothing more and I already spent a lot of time on the subject o if you want to add more functionalities, like real Excel Grouping, then go ahead and contribute your change of ExcelExportService So not everything that you asked for can be done, the Grouping feature comes from SlickGrid itself, I have created the Footer but it doesn't include anything about Grouping and if you want to Contribute then that would really great. You can ask those kind of questions on SlickGrid but don't expect anyone to reply or do the work for you, these are all Open Source libs and we all have a daily job and the reality is that this lib is a Team of 1 (myself) and I unfortunately have no extra time to add such features, I can however surely provide guidance in contributions. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ghiscoding]

I converted the issue to a "Discussion" since that is more like it.

There are examples of people adjusting row heights out there, but they are the row’s height and not the totals row because the totals for a group is handled separately. Can SlickGrid's row height be dynamically altered? - Stack Overflow

I know that there are some ways to get the row height changed, I'm the one who told you to Google it, but they are all hack and patches. There isn't much I can do about that part and I won't bring some hack into the lib. And I'll say it again, the Group Total is just a regular SlickGrid row, there's no different in styling from a regular to a group row, it's the exact same styling, the only difference is that it adds content on the row you have the aggregator. I also don't think calculating and showing the row height via jQuery will work, because SlickGrid calculate the row height and applies it directly to the row (you can see below, all row has the top: ..px, I think it's how SlickGrid deals with virtual scroll and row buffering... so applying CSS or different is pretty much useless, it will be overwritten by SlickGrid every time you scroll)

The Row Detail plugin might seem like dynamic row height but it's not, if you look carefully it's a calculation (and is an option panelRows) of how many grid rows you want to use, for example if you have panelRows: 5, then it will take the next 5 rows and replace them with the row detail panel content and then pushes the other rows to start at index 7, so it's not fully dynamic and you can't use half a row.

At the end of the day, all of the things you'd like to change will most probably have to be done in SlickGrid (core) lib itself for it to flow to Angular-Slickgrid.