Author Topic: Grouping: remove/hide the text in the grouped column detail rows  (Read 4490 times)

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Hi,

When grouping, I'd like the grouped column's text to be blank in the grid details below the group row, in order to show a hierarchy/indentation, as well as clean up the UI.
I have seen and done the examples where the grouped by column is hidden, which cleans up the UI, but I'd prefer to keep the column there for the indentation/hierarchy look.

Do you have any suggestions?

I have demo below. If you remove/re-add the grouped column, you'll see the text is removed. However, the grouped row also has the text removed. It looks like the grouped row uses the text from the detail row directly below it. Is there a way to get around this? Another option would be to change the column text color to the same as the background color. Can you recommend something based on the example?
https://jsfiddle.net/3Lbsqach/

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #1 on: January 29, 2020, 10:49:53 pm »
Good question, solution is simple by using column.render callback.

Code: [Select]
columnTemplate: {
render: function(ui){
//if not a title row and current column lies in groupby column.
if( !ui.rowData.pq_gtitle && this.option('groupModel.dataIndx').indexOf(ui.dataIndx) >= 0 ){
return "";
}
}
}

https://jsfiddle.net/bxsceyf7/
« Last Edit: January 29, 2020, 10:52:45 pm by paramvir »

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #2 on: January 30, 2020, 01:16:16 am »
Thanks, this is great!

Is there a way to merge cells in the grouping line, so the group text spans multiple columns?
If not, what is the code so that the text will not wrap to a new line if the cell isn't wide enough? I would prefer to have all cells (not just header rows) remain the same height and hide the overflow text (until column is manually widened) and not expand due to word wrapping.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #3 on: January 30, 2020, 09:31:29 am »
cells in the grouping line are merged by adding summaryInTitleRow: '' in groupModel

https://jsfiddle.net/e4s0jta5/

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #4 on: January 30, 2020, 09:59:45 pm »
Thank you.

For the grouping row formatting:
-For rows that are summed, how can I remove the word "Sum:" and just show the value
-what's the best way to color the grouped row differently and bold it

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #5 on: January 31, 2020, 03:39:06 pm »
For summary row, aggregate prefixes can be controlled by summaryTitle option.

https://paramquery.com/pro/api#option-summaryTitle

Summary row has pq_gsummary meta data associated with it which can be used to selectively add row level style in rowInit callback

https://paramquery.com/pro/api#option-rowInit

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #6 on: January 31, 2020, 06:16:04 pm »
Thank you.
I tried the summaryTitle in the groupModel and colModel in the link below but neither worked.
Can you show me how to implement the pq_summary?
https://jsfiddle.net/qjg4a1cL/

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #7 on: January 31, 2020, 10:32:03 pm »
Code: [Select]
summaryTitle: { sum: "{0}" },
rowInit: function(ui){             
      if(ui.rowData.pq_gtitle){
              return {
                    style: 'background:#ff9812;'                     
                }
        }
},

https://jsfiddle.net/f2hsg85z/

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #8 on: April 10, 2020, 07:00:03 pm »
Thank you. That works.
For the grouped row, sum column (revenues in our example), is there a way to prevent the column from being edited? If you double click the column, a dropdown appears with "Count" in it. I don't want anything to happen when that grouping column is double clicked.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #9 on: April 10, 2020, 09:01:30 pm »
Please add summaryEdit: false to groupModel

https://jsfiddle.net/muhn784t/

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #10 on: June 21, 2023, 09:43:17 pm »
For the grouping row, based on the column being grouped, I'm showing/hiding a summary value:

 groupChange: function () {
                        var GMDI = this.option('groupModel.dataIndx');
                        if (GMDI.indexOf('Project') == 0) {
                            this.getColumn({ dataIndx: 'SummaryField1' }).summary = { type: 'sum' };
                        }
         else {
             this.getColumn({ dataIndx: 'SummaryField1' }).summary = {}; //summary doesn't apply
         }

I'd also like to show/hide a text value for a text column. It's not a summary, since the text value is the same for all rows in the group.
How could I do this in the groupChange and the create functions.


create: function () {
   this.getColumn({ dataIndx: 'SummaryField1' }).summary = { type: 'sum' };
        this.getColumn({ dataIndx: 'ProjectField1' }).summary = { type: '??' };
)

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #11 on: June 22, 2023, 09:56:25 pm »
Your question is not properly understood. Could you please share a screenshot with little bit more elaboration if possible.

Thank you

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #12 on: June 23, 2023, 11:31:58 pm »
For the grouping row, how can I put text fields in that row. For example, for the Project Status, I'd like 'Cancelled' in the group header row. I was thing a type='first'?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6158
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #13 on: June 26, 2023, 08:00:54 am »
Ok, you have to define a custom aggregate and return the first element from the array of values. Then use that aggregate function name in the groupModel.

For more details please check this post, it's quite similar to your requirement:

https://paramquery.com/forum/index.php?topic=4623.msg16566#msg16566

Kindly let me know if you have any further questions on this.


mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 134
    • View Profile
Re: Grouping: remove/hide the text in the grouped column detail rows
« Reply #14 on: June 30, 2023, 09:06:39 pm »
Thanks. How could I apply this to the columns I want, using the following code:

 groupChange: function () {
                        var GMDI = this.option('groupModel.dataIndx');
                        if (GMDI.indexOf('Project') == 0) {
                            this.getColumn({ dataIndx: 'SummaryField1' }).summary = { type: 'sum' };
                            this.getColumn({ dataIndx: 'TextField1' }).summary = { type: '??' };
                       }
         else {
             this.getColumn({ dataIndx: 'SummaryField1' }).summary = {}; //summary doesn't apply
         }

I'd also like to show/hide a text value for a text column. It's not a summary, since the text value is the same for all rows in the group.
How could I do this in the groupChange and the create functions.


create: function () {
   this.getColumn({ dataIndx: 'SummaryField1' }).summary = { type: 'sum' };
        this.getColumn({ dataIndx: 'ProjectField1' }).summary = { type: '??' };
)