Grouping: remove/hide the text in the grouped column detail rows

[mikep]

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]

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/

[mikep]

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]

cells in the grouping line are merged by adding summaryInTitleRow: '' in groupModel

https://jsfiddle.net/e4s0jta5/

[mikep]

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]

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]

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]

Code: [Select]

summaryTitle: { sum: "{0}" },
rowInit: function(ui){             
      if(ui.rowData.pq_gtitle){
              return {
                    style: 'background:#ff9812;'                     
                }
        }
},

https://jsfiddle.net/f2hsg85z/

[mikep]

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]

Please add summaryEdit: false to groupModel

https://jsfiddle.net/muhn784t/

[mikep]

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]

Your question is not properly understood. Could you please share a screenshot with little bit more elaboration if possible.

Thank you

[mikep]

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]

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]

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: '??' };
)