ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mikep on April 10, 2020, 08:50:58 pm

Title: Conditional Cell Formatting
Post by: mikep on April 10, 2020, 08:50:58 pm
Hi, in the example below, I would like the cells to be formatted on initial load and when a profit or revenue value changes. I used your example from the website, but it's not working for me.

https://jsfiddle.net/k5m8aL92/3/
Title: Re: Conditional Cell Formatting
Post by: paramvir on April 10, 2020, 08:56:21 pm
Please use the recent version of pqgrid.

https://jsfiddle.net/hfs1pm78/
Title: Re: Conditional Cell Formatting
Post by: mikep on December 30, 2020, 09:24:15 pm
Thank you. How could I also apply the logic make the cell read-only in addition to coloring it red?
Title: Re: Conditional Cell Formatting
Post by: paramvir on December 30, 2020, 10:21:00 pm
Code: [Select]
render: function(ui) {
    var rd = ui.rowData;
    var edit = rd.pq_cellprop = rd.pq_cellprop || {}
    edit[ui.dataIndx] = {edit: true};
  if (rd.profits < rd.revenues) {
    return {
      style: {
        'background': 'blue'
      }
    };
  } else if (rd.profits > rd.revenues) {   
    return {
      style: {
        'background': 'green'
      }
    };
  } else {
    edit[ui.dataIndx] = {edit: false};
    return {
      style: {
        'background': 'red'
      }
    };
  }
}

https://jsfiddle.net/w504q2fo/
Title: Re: Conditional Cell Formatting
Post by: mikep on March 12, 2021, 07:14:44 pm
Your example works, but when I transferred to my grid, it doesn't work.
I want to make a cell read only based on the value of another cell in the row. Can you correct/simplify below?
The breakpoint is getting hit at rd.CostCenter == "1296" but the cell remains editable.

                var colM = [
                    { title: "Reserve", width: 70, includeInSum: true, summary: { type: "sum" }, dataIndx: "STE_Hours_Reserved", datatype: "float", align: "right",
                        render: function (ui) {
                            var rd = ui.rowData;
                            var zz = rd.pq_cellprop = rd.pq_cellprop || {}
                            zz[ui.dataIndx] = {edit: true};

                            if (rd.CostCenter == "1296") {
                                zz[ui.dataIndx] = { edit: false };
                            }
                        }
                 ]
                    }
                ];
Title: Re: Conditional Cell Formatting
Post by: paramvir on March 15, 2021, 10:34:43 am
Which version of grid are you using?
Title: Re: Conditional Cell Formatting
Post by: mikep on March 16, 2021, 08:09:26 pm
How do I determine the version? Also, my webpage displays "ParamQuaery Pro Eval" in bottom right, so I'm guessing I need to update my code?
Title: Re: Conditional Cell Formatting
Post by: paramvir on March 16, 2021, 10:25:38 pm
Please download commercial version SDK from your forum account and replace all Evaluation version files.
Title: Re: Conditional Cell Formatting
Post by: mikep on March 31, 2021, 08:38:32 pm
Thank you. I've downloaded v7.7.0 and updated the page's references to point to these. What's the next step remove "ParamQuery Pro Eval" from the page?
Title: Re: Conditional Cell Formatting
Post by: paramvir on April 01, 2021, 10:56:45 pm
"ParamQuery Pro Eval" should have been removed by now.

If not, then hard refresh your browser cache.
Title: Re: Conditional Cell Formatting
Post by: mikep on April 06, 2021, 07:07:16 pm
Thanks. "ParamQuery Pro Eval" is now removed. Also, I got the conditional format working after getting the latest grid version.
Title: Re: Conditional Cell Formatting
Post by: mikep on May 04, 2021, 11:30:30 pm
Is there a way to conditionally show a column's grouped sum only when grouped by a certain field?
For example, in this grid, for the month1 column, I want to show the sum when grouped by rank. If grouped by company, then don't show any value in the grouped header column. This would apply for 1 or many grouping levels.

https://jsfiddle.net/z3w2Lthc/
Title: Re: Conditional Cell Formatting
Post by: mikep on May 11, 2021, 05:19:35 pm
Hello, Can you please answer this? Thank you.
Title: Re: Conditional Cell Formatting
Post by: paramvir on May 11, 2021, 10:19:43 pm
Please use groupChange event to setup the summary of month1 column

Code: [Select]
            groupChange: function() {
              var GMDI = this.option('groupModel.dataIndx');
              if (GMDI.indexOf('company') >= 0) { //if grouped by company
                this.getColumn({
                  dataIndx: 'month1'
                }).summary = {};
              } else if (GMDI.indexOf('rank') >= 0) {
                this.getColumn({
                  dataIndx: 'month1'
                }).summary = {
                  type: 'sum'
                };
              }
            }


https://jsfiddle.net/tfcea0xq/
Title: Re: Conditional Cell Formatting
Post by: mikep on May 19, 2021, 04:57:25 pm
Thank you. How can this be updated so that if grouped by 2 columns (company and rank) the sum is only displayed for 1 column (rank)
Title: Re: Conditional Cell Formatting
Post by: mikep on May 19, 2021, 07:45:32 pm
Disregard my last request. At the moment I don't need to apply this grouping granularity. Thanks again.
Title: Re: Conditional Cell Formatting
Post by: mikep on July 13, 2021, 06:07:30 pm
For grouped rows: I would like to change the background of the grouping row to red if two particular columns are not equal AND if the group row is grouped by a particular column.
In my jsfiddle, if month1 <> month 2 AND is grouped by Rank, then color red.

https://jsfiddle.net/z3w2Lthc/
Title: Re: Conditional Cell Formatting
Post by: paramvir on July 14, 2021, 08:54:11 am
Code: [Select]
rowInit: function(ui) {
  var rd = ui.rowData;
  if (rd.pq_gtitle) {
    if ((rd.month1 != rd.month2) && (this.option('groupModel.dataIndx').indexOf('rank') >= 0))
      return {
        style: 'background:red;'
      }
    else
      return {
        style: 'background:#ff9812;'
      }
  }
},

https://jsfiddle.net/nmyj7ezh/2/
Title: Re: Conditional Cell Formatting
Post by: mikep on July 27, 2021, 05:18:03 pm
Thank you. What is the syntax If I only want to color 1 column (month1) red in the grouping row? I tried a render function for the column but could figure out the group logic.
Title: Re: Conditional Cell Formatting
Post by: paramvir on July 27, 2021, 07:09:28 pm
Same syntax.

move same code to column.render callback:

https://jsfiddle.net/4sfkjn90/
Title: Re: Conditional Cell Formatting
Post by: mikep on July 29, 2021, 12:31:36 am
Thanks! Follow on question. Now that I've applied a cell color, the red tracking indicator no longer appears after the cell is edited. The grid still remembers the edited rows, but the indicator doesn't display. Adding this callback makes the "dirty" indicator not appear. Any ideas?

colAP.render = function (ui) {
  return { style: 'background:pink' };
}

Here's an example that mimics my layout, but in this example the indicator DOES appear. Hopefully you may have an idea.
http://jsfiddle.net/vydnwLoa/6/
Title: Re: Conditional Cell Formatting
Post by: paramvir on July 29, 2021, 03:11:47 pm
Please use 'background-color' instead of background.
Title: Re: Conditional Cell Formatting
Post by: mikep on August 10, 2021, 12:58:15 am
Thank you. How can I color column headers dynamically? In the example below, I'd like the column headers (both rows) colored the same as the cells.

https://jsfiddle.net/mc95f4d0/3/
Title: Re: Conditional Cell Formatting
Post by: mikep on August 11, 2021, 07:32:16 pm
Hello, will you be able to address this in the next day or 2?
Title: Re: Conditional Cell Formatting
Post by: paramvir on August 12, 2021, 11:09:54 am
Sorry, header cells can't be dynamically styled.