How to change all cells color based on value

Suite and Optimus Suite 5
#1

I have “A or R or B” value in all the columns except “Assessor” column in the grid and I want to achieve following things after loading my grid:

1)if a column cell contains value “A” then it is be in red color or if a column cell contains value “R” then it is be in green color or if a column cell contains value “B” then it is be in blue color.

2)I want to display count of “A or R or B” in all columns except “Assessor” using footers.

var CurrentTopDiv = new dhtmlXGridObject('Top12');	
CurrentTopDiv.setImagePath("https://www.lifemark.ca/contents/dhx/grid/imgs/");	//path to images required by grid							
CurrentTopDiv.setHeader("Assessor,07:00,07:15,07:30,07:45);
CurrentTopDiv.attachHeader("#select_filter,#select_filter,#select_filter,#select_filter,#select_filter");						
CurrentTopDiv.setColTypes("ro,ro,ro,ro,ro");	
CurrentTopDiv.setColSorting("str,str,str,str,str");
CurrentTopDiv.enableMultiline(true);	
CurrentTopDiv.enableAutoHeight(true);
CurrentTopDiv.enableResizing("false,false,false,false,false"); // resizing is enabled for all columns by default
CurrentTopDiv.enableEditEvents("false,false,false,false,false");				
CurrentTopDiv.setSkin("dhx_skyblue");							
CurrentTopDiv.init();	
CurrentTopDiv.enableHeaderMenu();	

CurrentTopDiv.attachFooter("<strong>Available</strong>,<div id= 'Available_1'></div>,<div id='Available_2'></div>,<div id='Available_3'></div>,<div id='Available_4'>");
CurrentTopDiv.attachFooter("<strong>Reserved</strong>,<div id= 'Reserved_1'></div>,<div id='Reserved_2'></div>,<div id='Reserved_3'></div>,<div id='Reserved_4'>");
CurrentTopDiv.attachFooter("<strong>Booked</strong>,<div id= 'Booked_1'></div>,<div id='Booked_2'></div>,<div id='Booked_3'></div>,<div id='Booked_4'>");
#2

1)if a column cell contains value “A” then it is be in red color or if a column cell contains value “R” then it is be in green color or if a column cell contains value “B” then it is be in blue color.

You may try to use the following code:

mygrid.load(data,function(){ mygrid.forEachRow(function(id){ // function that gets id of the row as an incoming argument for (var i=0; i<grid.getColumnCount(); i++){ // i - index of the column val=mygrid.cells(id,i).getValue(); if (val=="A"){ mygrid.setCellTextStyle(id,i,"background-color:red"); } If(val=="R"){ mygrid.setCellTextStyle(id,i,"background-color:green"); } If(val=="B"){ mygrid.setCellTextStyle(id,i,"background-color:blue"); } } }) })

#3

2)I want to display count of “A or R or B” in all columns except “Assessor” using footers.

You will have to create your own custom statistic shortcuts.
Here you can find a tutorial:
docs.dhtmlx.com/doku.php?id=dhtm … s_creation