datagrid formatter columns

[pato.llaguno]

I have a datagrid with easyui, i create dynamically the headers since they depend on my database. i have gotten my header right already. this is the json object being passed to the datagrid.

Code:

[[
  {"field": "status","title": "Estatus","align": "center","rowspan": "2"},
  {"field": "Numero","title": "Orden","align": "center","rowspan": "2"},
  {"field": "FechaRegistro","title": "Fecha","align": "center","rowspan": "2"},
  {"field": "T1","title": "00:02:00","align": "center"},
  {"field": "T2","title": "00:24:00","align": "center"},
  {"field": "T3","title": "00:04:00","align": "center"},
  {"field": "T4","title": "02:00:00","align": "center"},
  {"field": "Cierre","title": "Fecha y Hora<br \/>de Cierre","align": "center","rowspan": "2"}
    ],[
  {"field": "P1","title": "Informacion <br\/>tecnica para <br\/>aprobacion","align": "center","formatter": "formatColor()"},
  {"field": "P2","title": "Aprobacion de<br\/> Informacion<br\/>Tecnica cliente","align": "center","formatter": "formatColor()"},
  {"field": "P3","title": "Informacion<br\/>Tecnica de<br\/>Proceso","align": "center","formatter": "formatColor()"},
  {"field": "P4","title": "Compra y<br\/>Recepcion de<br\/>Materiales","align": "center","formatter": "formatColor()"}
]]

and i am having a function in my .js

Code:

function formatColor(val,row){
    if (val < 20){
        return '<span style="color:red;">('+val+')</span>';
        console.log(row);
    } else {
        return val;
        console.log(row);
    }
}

but i get this in my console as error.

Code:

Uncaught TypeError: col.formatter is not a function

my grid is being populated with a query every second with some times in the P1,P2,P3,P4 columns, the T1,T2,T3,T4 are just the established time that that column should take. So I am trying to make that if my column value is higher than it it will become red background. But i am trying to at least call the function formatter and i cant even get to that. i got this idea from the API and the this example, the difference is that i am generating the columns dynamically, and my function is not being called so i cant move forward.

Thanks,

[pato.llaguno]

I have been playing around a bit with this to find out that i actually needed a styler instead of formatter, and i managed to make this work out the desired function. in a jsfiddle http://jsfiddle.net/jg0t94g7/56/

Code:

function formatColor(val,row,lol){
    var col = "";
    for(var name in row){
        col = "";
    	var value = row[name];
    	if(value === val){
        	col = name;
            
        }
    	if(col !=="" && val!==""){
        	var opts = $('#dg').datagrid('getColumnOption',col);
            var pr =opts["field"].substring(1);
            var opts2 = $('#dg').datagrid('getColumnOption', 'T'+pr);
            var time = opts2["title"];
            if(val >= time){
                return 'background-color:#ff0000;color:white;';
            }
            else{
                return 'background-color:#00ff00;color:white;';
            }
    		
    	}
    }
    
    return val;

}

This works like a charm, the only problem is that headers are not being loaded dynamically here, i cant make it work with dynamic headers. this is how i load my header.

Code:

function RefreshHeaders(){
	$.ajax({            
	    url:"includes/getHeader.php",
	    cache: false,
	    timeout: 5000,   
	    async: true,    
	    success: function(data){
		 //console.log(data);
		 var objekJSON=jQuery.parseJSON(data);       
		 $('#dg').datagrid({
		 fit:true,
		 fitColumns:false,
		 columns:objekJSON,
		 url:"includes/Get_Orders.php"
		 });
	     }
	 });
         
       
    }

and inside my getHeader.php i place the styler like this.

Code:

                    include "ChromePhp.php";
		    $result = array();
                    $result2 = array();
		    $stmt = $this->pdo->prepare("SELECT * FROM Procesos");
		    $stmt->execute();
		    $rows = $stmt->fetchall();
		    $nodeParent = array();
		    $startNode = array();
		    $startNode['field'] = 'status'; 
		    $startNode['title'] = 'Estatus';
		    $startNode['align'] = 'center';
		    $startNode['rowspan'] = '2';
		    array_push($nodeParent,$startNode);
		    $startNode['field'] = 'Numero'; 
		    $startNode['title'] = 'Orden';
		    $startNode['align'] = 'center';
		    $startNode['rowspan'] = '2';
		    array_push($nodeParent,$startNode);
		    $startNode['field'] = 'FechaRegistro'; 
		    $startNode['title'] = 'Fecha';
		    $startNode['align'] = 'center';
		    $startNode['rowspan'] = '2';
		    array_push($nodeParent,$startNode);
		    foreach($rows as $row){
			$node = array();    
			$node['field'] = 'T' . $row['Id']; 
			$node['title'] = $row['TiempoStd'];
			$node['align'] = 'center';
			array_push($nodeParent,$node);
		    }
                    $proc = array();
                    foreach($rows as $row){
			$node = array();    
			$node['field'] = 'P' . $row['Id']; 
			$node['title'] = $row['Nombre'];
			$node['align'] = 'center';
                        $node['styler']= "formatColor";
			array_push($proc,$node);
		    }
		    $startNode['field'] = 'Cierre'; 
		    $startNode['title'] = 'Fecha y Hora<br />de Cierre';
		    $startNode['align'] = 'center';
		    $startNode['rowspan'] = '2';
		    array_push($nodeParent,$startNode);
		    array_push($result,$nodeParent);
                    array_push($result2,$proc);
                    $header = array_merge($result,$result2);
		    ChromePhp::log(json_encode($header,JSON_PRETTY_PRINT));
		    echo json_encode($header);