setCellTextStyle for background colour not working properly

Suite and Optimus Suite 5
#1

I have a grid with a number of columns. 2 of the columns are Invoice Val and Receipt Val. I am setting the background colour of the Receipt Val as follows:

1 To red if Receipt Val is non-zero AND it’s not equal to Invoice Val.
2 To green if Receipt Val is equal to Invoice Val
3 No background colour if Receipt Val equals zero.

To achieve this I have the following code:

      function doAfterLoadData()
      {
          grdInvs.forEachRow(function(rid){
              if(grdInvs.cells(rid,InvType).getValue() == 'Credit Note')
              {
                  grdInvs.setCellTextStyle(rid,InvType,'color:red');
                  grdInvs.setCellTextStyle(rid,InvValExcVAT,'color:red');
                  grdInvs.setCellTextStyle(rid,InvVATVal,'color:red');
                  grdInvs.setCellTextStyle(rid,InvTotalVal,'color:red');
              }
              setReceiptsColour(rid);
          });
          grdInvs.filterByAll();
      }
      function setReceiptsColour(rid)
      {
          TmpRecVal = parseFloat(grdInvs.cells(rid,InvReceiptsVal).getValue().split('^')[0]).rnd(2);
          TmpInvVal = parseFloat(grdInvs.cells(rid,InvTotalVal).getValue()).rnd(2);
          //TmpRecVal == 0 ? '' : TmpInvVal == TmpRecVal  ? grdInvs.setCellTextStyle(rid,InvReceiptsVal,'background-color:#BDFCC9') : grdInvs.setCellTextStyle(rid,InvReceiptsVal,'background-color:#FFC0CB');
          if(TmpRecVal != 0)
          {
              TmpInvVal == TmpRecVal  ? grdInvs.setCellTextStyle(rid,InvReceiptsVal,'background-color:#BDFCC9') : grdInvs.setCellTextStyle(rid,InvReceiptsVal,'background-color:#FFC0CB');
          }
      }

When the grid is first loaded the initial rows bieng displays show the correct background colour. However all rows that are not within the initial display are not being set. So when a user scrolls down then all rows that were previously not visible do not have any background colour applied.

I am using Professional Full Suite v3.0.

Please help.

Thanks
Purvez

#2

This behavior appears due to the smart rendering or paging mode in your grid.
As the the grid data renders not completely and the setCellTextStyle() method can’t be applied to the not-rendered rows.

You need to create a custom exCell type which will change the color of your cell accordingly to it’s value.
Here you can find a detailed tutorial with examples:
docs.dhtmlx.com/doku.php?id=dhtm … l_creation

And a simple working example:
dhtmlx.com/docs/products/dht … ormat.html

#3

Thanks very much for your quick response. I am trying to create a custom eXcell as follows:

      function eXcell_rec(cell)
      {
          this.base = eXcell_link;
          this.base(cell);
          this.cell.style['background-color','#BDFCC9'];
          eXcell_rec.prototype = new eXcell_link;
      }

However in dhtmlxgrid_excell_link I’m getting an error saying that cell is undefined. When I look at the code in the link that you gave me for the custom cell creation tutorial it is different to the example link code.

Please remember that I’m using ver 3.0 Professional Full suite.

Please can you tell me what I’m doing wrong with my code?

Also within the function I need to get the row id for the relevant cell to get other values from the grid. Please can you tell me how I can get access to the row id within the function.

Many thanks for all your help.

Purvez

#4

Hi

Please may I have some help with this. Many thanks

Purvez

#5

PLEASE I need some help with this. Thanks

#6

Hi

I need some help with this. Please please help.

Why am I being ignored?

#7

sorry for the delay.

Please, try to use the following code:

[code] function eXcell_rec(cell)
{
this.base = eXcell_link;
this.base(cell);
this.cell.style.backgroundColor=’#BDFCC9’;

}
eXcell_rec.prototype = new eXcell;[/code]
#8

Hi Sematik

I finally got a chance to try out your suggestion and it worked brilliantly. Many thanks for that.

However I now have another issue. My full requirement is to change the backgroundColor of the cell depending on comparing the value in the cell with another value in the same row. I therefore need to know how I can acccess the rowid of the cell in question please. Basically I have an invoice column and a receipts column. If the receipts value is non zero and equal to invoice value then I set receipts backgroundColor to green otherwise to red. If receipts value is zero I leave the backgroundColor white. So for that I need to have the row id.

Your help will be greatly appreciated.

Thanks again

Purvez

#9

Hi Sematik

Following is my full eXcell_rec function:

      function eXcell_rec(cell)
      {
          this.base = eXcell_link;
          this.base(cell);
          TmpRecVal = parseFloat(grdInvs.cells([rid,InvReceiptsVal).getValue().split('^')[0]).rnd(2);
          TmpInvVal = parseFloat(grdInvs.cells(rid,InvTotalVal).getValue()).rnd(2);
          TmpRecVal == 0 ? '' : TmpInvVal == TmpRecVal  ? this.cell.style.backgroundColor ='#BDFCC9' : this.cell.style.backgroundColor='#FFC0CB';


          this.cell.style.backgroundColor='#BDFCC9';

      }
      eXcell_rec.prototype = new eXcell;

I looked around in your code and came up with :

this.cell.parentNode.idd as the row id value. However if I put that in the above code to get ‘rid’ then I get an excessive recursion error.

Hope you have a solution for me. :slight_smile:

Thanks

#10

Hi

I now need to finalise this rather urgently. Your assistance is would be very much appreciated. Thanks.

#11

Please, provide with a complete demo where your custom exCell is used.
In the provided code InvReceiptsVal, InvTotalVal variables are not very clear.

#12

Hi Sematik

The InvReceiptsVal and InvTotalVal are merely numeric values which refer to the Column Index. I already know these.

What I’m trying to understand is how I can access the Row ID for the ‘cell’ in the eXcell function.

Thanks

Purvez

#13

if (cell){ this.cell = cell; this.grid = this.cell.parentNode.grid; } var row_id=this.cell.parentNode.idd; //get related row id
works well for us.

#14

Hi Sematik

This is what I tried previously and again just now:

      function eXcell_rec(cell)
      {
          this.base = eXcell_link;
          this.base(cell);
          rid = this.cell.parentNode.idd;
          TmpRecVal = parseFloat(grdInvs.cells(rid,InvReceiptsVal).getValue().split('^')[0]).rnd(2);
          TmpInvVal = parseFloat(grdInvs.cells(rid,InvTotalVal).getValue()).rnd(2);
          TmpRecVal == 0 ? '' : TmpInvVal == TmpRecVal  ? this.cell.style.backgroundColor ='#BDFCC9' : this.cell.style.backgroundColor='#FFC0CB';


          //this.cell.style.backgroundColor='#BDFCC9';

      }
      eXcell_rec.prototype = new eXcell;

Firebug reported this:

too much recursion
http://gi/assets/javascripts/dhtmlxSuite_v30/dhtmlxGrid/codebase/dhtmlxgrid.js
Line 5946

This happens after the data for the grid is loaded.

My afterLoadData function is as follows:

      function doAfterLoadData()
      {
          grdInvs.forEachRow(function(rid){
              if(grdInvs.cells(rid,InvType).getValue() == 'Credit Note')
              {
                  grdInvs.setCellTextStyle(rid,InvType,'color:red');
                  grdInvs.setCellTextStyle(rid,InvValExcVAT,'color:red');
                  grdInvs.setCellTextStyle(rid,InvVATVal,'color:red');
                  grdInvs.setCellTextStyle(rid,InvTotalVal,'color:red');
              }
          });
          grdInvs.filterByAll();
      }
#15

function eXcell_rec(cell)
{
this.base = eXcell_link;
this.base(cell);
rid = this.cell.parentNode.idd;
…
Please, try to make the rid a local variable but not a global.
function eXcell_rec(cell)
{
this.base = eXcell_link;
this.base(cell);
var rid = this.cell.parentNode.idd;
…

#16

Hi Sematik

I did what you suggested but same result:

Firebug reported:

too much recursion
http://gi/assets/javascripts/dhtmlxSuite_v30/dhtmlxGrid/codebase/dhtmlxgrid.js
Line 5946

Thanks for your continued help.

#17

Unfortunately the issue cannot be reproduced locally.
If the problem still occurs for you, please, provide with a complete demo, where it can be reconstructed.
Here you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#18

Hi Sematik

This is the function within dhtmlxgrid.js where the error is occuring:

 cells:function(row_id, col){
if (arguments.length == 0)
return this.cells4(this.cell);
else
var c = this.getRowById(row_id);
var cell = (c._childIndexes ? c.childNodes[c._childIndexes[col]] : c.childNodes[col]);
return this.cells4(cell);
},

Line 5496 where the error occurs is :
var cell = (c._childIndexes ? c.childNodes[c._childIndexes[col]] : c.childNodes[col]);

Hope this helps.

#19

Hi Sematic

Please can you go to the following url:

resys2.gourmindia.com/start

At the login form use:

User : pt01
Pwd : pt01

At the menu under Test Options there is only 1 option: View Invoices Test.

When you run that you will get a window in which the grid appears and after the data is loaded but before it gets displayed you get the ‘too much recursion’ error.

Hope this helps. If you need any further info then please let me know.

Thanks for all your help.

Purvez

#20

Hi Sematik

If possible will you please delete the post with the web site URL and User name and Pwd once you’ve made a note of them. Many thanks

Purvez