Author Topic: Conditional Cell Formatting  (Read 6779 times)

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Conditional Cell Formatting
« 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/

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: Conditional Cell Formatting
« Reply #1 on: April 10, 2020, 08:56:21 pm »
Please use the recent version of pqgrid.

https://jsfiddle.net/hfs1pm78/

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #2 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?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: Conditional Cell Formatting
« Reply #3 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/

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #4 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 };
                            }
                        }
                 ]
                    }
                ];

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: Conditional Cell Formatting
« Reply #5 on: March 15, 2021, 10:34:43 am »
Which version of grid are you using?

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #6 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?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: Conditional Cell Formatting
« Reply #7 on: March 16, 2021, 10:25:38 pm »
Please download commercial version SDK from your forum account and replace all Evaluation version files.

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #8 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?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: Conditional Cell Formatting
« Reply #9 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.

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #10 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.

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #11 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/

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #12 on: May 11, 2021, 05:19:35 pm »
Hello, Can you please answer this? Thank you.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6121
    • View Profile
Re: Conditional Cell Formatting
« Reply #13 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/
« Last Edit: May 11, 2021, 10:21:48 pm by paramvir »

mikep

  • Pro Ultimate
  • Full Member
  • *
  • Posts: 132
    • View Profile
Re: Conditional Cell Formatting
« Reply #14 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)