I have a grid table with filled values from mysql database (using dhtmlxconnector). In some columns there have to be checkboxes.
Is it possible to change the color of the the cell with the checkbox when selecting or deselecting the box? For example when the checkbox is checked the color of the cell should be green, when the checkbox is not checked the color of the cell should be red. How can i do this?
Also i would like to know how i can change colors for single cells and columns?
Thanks for your solution! I forgotten to mention that i would like to change the cells color also for cells where the checkbox is already checked or not. The data for the checkboxes are loaded from database and so some cells are already selected and some not. How can i set the cells color for already presetted checkboxes?
I’ve read in another subject the following:
[code]mygrid.loadXML(“grid.xml”,function(){
mygrid.forEachRow(function(id){
if (mygrid.cellById(id,INDEX).getValue()==“X”) mygrid.setCellTextStyle(id,INDEX,“background-color: green”);
else if (mygrid.cellById(id,INDEX).getValue()==“Y”) mygrid.setCellTextStyle(id,INDEX,“background-color: yellow”);
});[/code]
But what value do i have to put for id and INDEX?
Below you can see my colums with the checkboxes.
mygrid.loadXML("grid.php" ,function(){
mygrid.forEachRow(function(id){
if (mygrid.cellById(id,7).getValue()=="1")
{
mygrid.setCellTextStyle(id,7,"background-color: green");
}
if (mygrid.cellById(id,8).getValue()=="1")
mygrid.setCellTextStyle(id,8,"background-color: green");
if (mygrid.cellById(id,9).getValue()=="1")
mygrid.setCellTextStyle(id,9,"background-color: green");
if (mygrid.cellById(id,7).getValue()=="0")
{
mygrid.setCellTextStyle(id,7,"background-color: red");
}
if (mygrid.cellById(id,8).getValue()=="0")
mygrid.setCellTextStyle(id,8,"background-color: red");
if (mygrid.cellById(id,9).getValue()=="0")
mygrid.setCellTextStyle(id,9,"background-color: red");
});
})
He does the right thing BUT only or the first five rows. It seems that he executes the function only or the first five rows and than the rest of the grid data is loaded. Below a screenshot of my problem. Any suggestions?
Are you using dynamic or static loading?
forEachRow() method loops through only loaded and rendered rows.
If you plan to have a lot of rows in your grid it’s better to implement custom eXcell type.
I load my data from mysql database. No more datas then the ones from the screenshot are being loaded. Is there another way to solve my problem except the excell thing?
And if i have to use the excell thing how does this exactly works for my case? If i understood the example right, this code only works for one row not for the whole grid?
function eXcell_button(cell){ //excell name is defined here
if (cell){ //default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this); //use methods of "ed" excell
}
this.setValue=function(val){
this.setCValue("<input type='button' value='"+val+"'>",val);
}
this.getValue=function(){
return this.cell.firstChild.value; // get button label
}
}
Where do i have to put the if statement in the function to check if the select box is selected or not and to change the color?
And how do i have to do this exactly? Could you please give me an example how to change it for “ch”? Where do i have to put th ch thing for checkboxes in the function?
Well, i’ve tried a lot and is works now EXCEPT one thing. This is my code:
function eXcell_colorcells(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this);
}
this.setValue=function(val){
this.setCValue(val);
if (val=="0")
{
this.setCValue("<input type='checkbox'>", val);
this.cell.style.backgroundColor="red";
}
else if (val=="1")
{
this.setCValue("<input type='checkbox' checked='checked'>", val);
this.cell.style.backgroundColor="green";
}
}
this.getValue=function(){
if (this.cell._clearCell)
return "";
return this.cell.innerHTML.toString()._dhx_trim();
}
}
The problem is, that he doesn’t write it to database when i check an unchecked checkbox or uncheck a checked checkbox. What do i have to change?
Please open dhtmlxgridcell.js file from sources folder in your dhtmlxGrid package, go to line 604. Here you will see code of setValue() method of “ch” cell.
The best way is to copy code of “ch” eXcell type and enter following line in setValue() method:
if (val=="0")
{
this.cell.style.backgroundColor="red";
}
else if (val=="1")
{
this.cell.style.backgroundColor="green";
}
I’ve tried your solution, but it didn’t work. Here is my code, starts at line 640 (you wrote line 604 but i guess you meant 640):
[code]eXcell_ra.prototype=new eXcell_ch;
eXcell_ra.prototype.setValue=function(val){
this.cell.style.verticalAlign=“middle”; //nb:to center checkbox in line
if (val){
val=val.toString()._dhx_trim();
if ((val == "false")||(val == "0"))
val="";
}
// MY CODE BEGINS HERE
if (val=="0")
{
this.cell.style.backgroundColor="red";
}
if (val=="1")
{
this.cell.style.backgroundColor="green";
}
// MY CODE ENDS HERE
if (val){
if (!this.grid._RaSeCol)
this.grid._RaSeCol=[];
if (this.grid._RaSeCol[this.cell._cellIndex]){
var z = this.grid.cells4(this.grid._RaSeCol[this.cell._cellIndex]);
z.setValue("0")
if (this.grid.rowsAr[z.cell.parentNode.idd])
this.grid.callEvent("onEditCell", [
1,
z.cell.parentNode.idd,
z.cell._cellIndex
]);
}
this.grid._RaSeCol[this.cell._cellIndex]=this.cell;
val="1";
this.cell.chstate="1";
} else {
val="0";
this.cell.chstate="0"
}
this.setCValue("<img src='"+this.grid.imgURL+"radio_chk"+val+".gif' onclick='new eXcell_ra(this.parentNode).changeState(false);'>",
this.cell.chstate);
}[/code]
I’ve finally got it!
In my js-file the code starts at line 557 where i have to put in the code from you above!
Thanks a lot for your solution!
I have two more questions:
Is it possible to edit the cells of the grid with rich text editor so that people can underline words or make them bold?
Is it also possible to change the color of the cell when checkbox will be checked or unchecked?
I’ve tried it with the following code but than the grid will not being loaded:
mygrid.attachEvent("onCheck",function(rowId,cellInd,state){
if (state){
mygrid.setCellTextStyle(rowId,cellInd,"background-color: #9EE396;");
}
Is it possible to edit the cells of the grid with rich text editor so that people can underline words or make them bold?
You can create custom eXcell type and use dhtmlxEditor as cell editor. We haven’t ready solution for this
Is it also possible to change the color of the cell when checkbox will be checked or unchecked?
I’ve tried it with the following code but than the grid will not being loaded:
Are you trying to change color of ‘ch’ cell? “ch” cell doesn’t have text so it impossible to change color. The best work around is to create custom image for checked\unchecked checkboxes.
Thanks very much for your support!
One more problem i have to solve. I use grid2pdf to create pdfs from the grid. For the headers of the grid i use 3 image icons but they do not appear in the pdf file. Is it possible that these images appear in the header columns of pdf file too?
And how can i make an image column? Is than only the header an image or the whole column? Right now it looks like this and i would like to show the images of the headers in pdf too:
img column ( img type in setColTypes command ) affects only data part of grid.
It is not possible to use it to show images in header ( which means - no images in pdf export )
ok, thanks for the answer. I have another problem. As you can see in the picture above there are different colors for the character values ‘w’ and ‘m’ in the column ‘sex’. I’ve wrote a custom check to make sure that the user can only input characters ‘m’, ‘w’, ‘M’ and ‘W’. But it’s always invalid. It doesn’t matter what kind of character is in the fields of this column when updating. In the logfile i saw that the value of this cell/column is always an ‘e’. I think the reason for that problem is the custom excell. How can i solve this problem? Here the code for the check:
