function for color cell value

[sofia403]

Hi, i was wondering if someone could help me out with some javascript function. i have very little knowledge on this topic and searched everywhere to solve my problem, but cant find the answer still. Im thinking its probably a very straight forward for some one who knows this stuff.

 

basically i have a grid that pulls data from my sql, i would like some of the cells to be highlited based on the value in them. So for that im using this function below which im thinking should color the cell to red if value is "disapproved" or green if its some other value,

 

function negativecontrol(val,cell,row){
    if(val=='dispproved'){
      return "<span style='color:red;'>"+val+"</span>";
       // OR //
      $(cell).css('color','red');
      return val; // we have to return the value to be printed;
    }else{
      return "<span style='color:green;'>"+val+"</span>";
       // OR //
      $(cell).css('color','green');
      return val; // we have to return the value to be printed
    }

}

 

 

then i just call that function like so, but still it doesnt work....please can someone point me in the right direction here? thank you!

 

{display: 'Status', name : 'Status', width : 85, sortable : true, align: 'center', renderer:negativecontrol},

[arbitter]

So you are trying to color a cell?

 

document.getElementById(cellid).bgColor='red';

 

so

if(val=='dispproved'){
     document.getElementById(cell).bgColor='red';
}

ofcourse that is if you wish to color the whole cell, and also if every cell has an id.

[sofia403]

hi arbiter,

 

yes i just want the cell to be colored lets say green or red based on the value in it. how do i find out the id of the cell?

i have a grid with column 'Status' and there i have all this values.

 

{display: 'Status', name : 'Status', width : 85, sortable : true, align: 'center'},

{display: 'Username', name : 'uname', width : 80, sortable : true, align: 'left'},

{display: 'Country', name : 'Country', width : 60, sortable : true, align: 'left'},

{display: 'Date', name : 'Date', width : 76, sortable : true, align: 'left'}

 

 

[arbitter]

By a grid, do you mean a table? Because to be honest, I'm not quite the js hero

[fugix]

I'm assuming

      $(cell).css('color','red');

doesn't color the table. Try using

      $(cell).css('background-color','red');

and your span style to background-color:red

[sofia403]

Hi fugix and arbitter,

 

thanks for your responses, however its still not working and im not quite sure if thats what i can use in this situation. Basically i have a mysql db and a grid that displays the data from db. Grid is similar in concept with the Ext Grid only its pure jQuery.

 

first I just query out what we need from mysql and pass it on to the grid with POST2.php and then INDEX.PHP display the data as shown below. and i just want the cells that have certain values to be highlighted. At the very bottom im quoting a code how to supposedly get it to work but im not having luck implementing it.

 

POST2.PHP

$sql = "SELECT Status,uname,countryif ($rc) $json .= ",";

$json .= "\n{";

$json .= "Status:'".$row['Status']."',";

$json .= "cell:['".$row['Status']."','".$row['uname']."'";

$json .= ",'".addslashes($row['country'])."'";

 

 

 

INDEX.PHP

<script type="text/javascript">

 

$(document).ready(function(){

$("#flex1").flexigrid

(

{

 

url: 'post2.php',

dataType: 'json',

colModel : [

{display: 'Status', name : 'Status', width : 85, sortable : true, align: 'center', renderer:negativecontrol},

{display: 'Username', name : 'uname', width : 80, sortable : true, align: 'left', renderer:negativecontrol},

{display: 'Country', name : 'country', width : 60, sortable : true, align: 'left', renderer:negativecontrol},

 

 

 

 

QUOTE

so the scenerio is from our data we get the active value as 1 and 0 ,

but we need to print "True" or "False". So first of all we define a

function for our renderer.

 

function truefalse(val,cell,row){

    // val => value of the cell

    // cell => cell itself

    // row => parent tr tag of cell

    if (val==1){

      return "True";

    }else{

      return "False";

    }

}

 

Be careful! you have to return at least a variable or a value to print

something in your cell. otherwise cell will be empty.

so after we defined our function we can add the property to our

colModel

  {display: 'Active', name : 'Active', width : 80, sortable : true,

align: 'center', renderer:truefalse}

 

after we save and refresh the grid, you'll see that instead of 1,0

values in Active column "True" or "False" texts. You can populate this

render functions as much as you want for a column. here is another

example ( I'll just give the function because the renderer property

will be the same way)

 

function negativecontrol(val,cell,row){
    if(val<=0){
      return "<span style='color:red;'>"+val+"</span>";
       // OR //
      $(cell).css('color','red');
      return val; // we have to return the value to be printed;
    }else{
      return "<span style='color:green;'>"+val+"</span>";
       // OR //
      $(cell).css('color','green');
      return val; // we have to return the value to be printed
    }

}

function negativecontrol2(val,cell,row){
    if(val<=0){
       $(row).css('color','red') // makes all row red
    }else{
       $(row).css('color','green'); // makes all row green;
    }

} 

 

[Adam]

You misspelt disapproved in your comparison:

 

if(val=='dispproved'){

[sofia403]

thanks MrAdam i changed that now but it has no affect and still not working.

[Adam]

Could you post the code you're now using?

[sofia403]

this is for my grid. POST2.PHP gets values from db and posts them to the grid and INDEX.PHP display them.

 

POST2.PHP

$sql = "SELECT Status,uname,countryif ($rc) $json .= ",";

$json .= "\n{";

$json .= "Status:'".$row['Status']."',";

$json .= "cell:['".$row['Status']."','".$row['uname']."'";

$json .= ",'".addslashes($row['country'])."'";

 

 

INDEX.PHP

<script type="text/javascript">

 

$(document).ready(function(){

  $("#flex1").flexigrid

        (

        {

       

        url: 'post2.php',

        dataType: 'json',

        colModel : [

            {display: 'Status', name : 'Status', width : 85, sortable : true, align: 'center', renderer:negativecontrol},

            {display: 'Username', name : 'uname', width : 80, sortable : true, align: 'left'},

            {display: 'Country', name : 'country', width : 60, sortable : true, align: 'left'},

 

 

 

I tried using this code, but cant get it to work.

 

function negativecontrol(val,cell,row){
    if(val=='Approved'){
      return "<span style='color:red;'>"+val+"</span>";
       // OR //
      $(cell).css('color','red');
      return val; // we have to return the value to be printed;
    }else{
      return "<span style='color:green;'>"+val+"</span>";
       // OR //
      $(cell).css('background-color','red');
      return val; // we have to return the value to be printed
    }

}

 

[Adam]

Okay. Can you provide the actual data in its JSON format this is being used with?

 

$sql = "SELECT Status,uname,countryif ($rc) $json .= ",";
$json .= "\n{";
$json .= "Status:'".$row['Status']."',";
$json .= "cell:['".$row['Status']."','".$row['uname']."'";
$json .= ",'".addslashes($row['country'])."'";

 

This looks a little odd to me. Could you not use json_encode?

[sofia403]

Ok so for data istelf it would be user input values. those are pulled from db.

 

So for

Status = "Approved" or "Disapproved" or "Withdrawn"

uname = "username"

country = "country"

 

And I'm afraid it has to be JSON. the whole grid works in that format. You can look up Flexigrid. Theres not much info unfortunately out there on it.

[Adam]

I was in favour of JSON, but it looks like you're generating it yourself. Unless the PHP you showed isn't all of it, I can spot an error.

 

You're missing a closing "]" for the cell array:

 

$json .= "cell:['".$row['Status']."','".$row['uname']."'";

 

And you're missing a closing "}" to end the object:

 

$json .= ",'".addslashes($row['country'])."'"

 

That's why I asked to see the actual data in its JSON format, to see if there was a syntax error.

 

Edit

 

Also - where do you execute the SQL defined in $sql?