ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: mikep on January 29, 2020, 10:16:53 pm
-
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/
-
Good question, solution is simple by using column.render callback.
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/
-
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.
-
cells in the grouping line are merged by adding summaryInTitleRow: '' in groupModel
https://jsfiddle.net/e4s0jta5/
-
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
-
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
-
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/
-
summaryTitle: { sum: "{0}" },
rowInit: function(ui){
if(ui.rowData.pq_gtitle){
return {
style: 'background:#ff9812;'
}
}
},
https://jsfiddle.net/f2hsg85z/
-
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.
-
Please add summaryEdit: false to groupModel
https://jsfiddle.net/muhn784t/
-
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: '??' };
)
-
Your question is not properly understood. Could you please share a screenshot with little bit more elaboration if possible.
Thank you
-
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'?
-
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.
-
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: '??' };
)
-
First define custom aggregate, you can name it anything.
pq.aggregate.mycustom = function( arr ){
return arr[ 0 ];
}
Then use it similar to inbuilt aggregates:
this.getColumn({ dataIndx: 'ProjectField1' }).summary = { type: 'mycustom' };
-
thank you. I defined the custom aggregate and tried to use it in the groupChange function but get the attached error.
$gridMain.aggregate.mycustom = function (arr) {
return arr[0];
}
groupChange: function () {
var GMDI = this.option('groupModel.dataIndx');
if (GMDI.indexOf('proj') == 0 ) { //if grouped by project
this.getColumn({ dataIndx: 'ProjectField' }).summary = { type: 'mycustom' };
}
},
-
$gridMain.aggregate.mycustom is incorrect.
It's pq.aggregate.mycustom, pq.aggregate is the namespace and 'mycustom' can be named anything.
-
can you put the project name in the group row in this example?
https://jsfiddle.net/94wvjse1/
-
Please check this:
https://jsfiddle.net/gyh3awp6/
-
thanks. I now need to make the custom summary dynamic based on the column being grouped, which is where I'm getting the error attached previously. Can you update the file to only apply the summary when grouping by rank? I tried in the group change event but get an error.
https://jsfiddle.net/gf3s2xdj/
-
groupChange: function() {
//debugger;
var GMDI = this.option('groupModel.dataIndx');
this.getColumn({
dataIndx: 'company'
}).summary = (GMDI.indexOf('rank') == -1) ? null : {
type: 'mycustom'
};
},
Please check this:
https://jsfiddle.net/nbka5yew/
-
How can I update this column, to not show anything in the summary rows when grouped?
{
title: "Project Actions", width: 140,
editor: {
type: 'select',
options: ['', 'View/Edit project details', 'Add Resources', 'Create an Issue/Escalation', 'Edit Timeline Status', 'History/Comment'],
},
cls: 'pq-drop-icon pq-side-icon',
render: function (ui) { return '<a style="color:blue" >Actions</a>' }
},
-
https://paramquery.com/pro/tutorial#topic-metadata
By excluding rows having pq_gsummary in render callback.
if( !ui.rowData.pq_gsummary ){
return '<a style="color:blue" >Actions</a>'
}
-
thank you.
-none of the rows have a value for pq_gsummary (see attachment)
-if the user were to click this column in the summary row, would they see the drop down values? I don't want that to happen
-
How can I update this column, to not show anything in the summary rows when grouped?
Where have you defined the summary rows?
-
groupModel: groupModel
var groupModel = {
on: true,
title: ["{0} ", "{0} "],
summaryEdit: false,
headerMenu: false,
indent: 20,
summaryInTitleRow: 'all', //to display summary in the title row.
dataIndx: ["ResourceType", "proj"],
collapsed: [false]
};
-
In that case, it's pq_gtitle instead of pq_gsummary
Also change the column editor from static object to callback that returns object conditionally depending upon ui.rowData.pq_gtitle value.
Example of conditional editors is here: https://paramquery.com/pro/demos/editors_conditional
Please share a jsfiddle if still facing issues.