Does formatter:function cancel out styler:function?

[swells808]

I have one column of my data grid that needs to do 2 different things
1. I need to subtract the entries from 2 different columns to return the result to this column (col a - col b = col c)
2. I need to set conditional styling for this column so if the result is >10 its turns yellow but if its >5 it turns red.

So here is the code I added to my grid, the problem I am having is the math result comes through correctly but the cell styler is ignored entirely (prior to the math function the styler would ignore the else statement). It seems like I can only call for one function to be completed which can't be right can it? Here is my code:

Code:

<table id="dg" title="Maintenance Log" class="easyui-datagrid" style="width:1000px;height:650px"
			url="get_users.php"
			toolbar="#toolbar"
			data-options="
			pagination:true,
			rownumbers:true, 
			fitColumns:true, 
			singleSelect:true,
			">
		<thead>
			<tr>
				<th data-options="field:'date',width:75">DATE</th>
				<th data-options="field:'acft',width:50">ACFT</th>
				<th data-options="field:'loc',width:40">LOC</th>
				<th data-options="field:'mttime',width:50">MTTIME</th>
				<th data-options="field:'nxtsvc',width:50">NXTSVC</th>
				<th data-options="field:'time',width:50,formatter:function(value,row){
			return row.nxtsvc - row.mttime;	//
		},
				styler:function cellStyler(value,row,index){
            if (value > 5 && value <= 10){
                return 'background-color:yellow;color:red;';
            } else if (value > 10){
            	return 'background-color:red;color:yellow;'
            }
        }
">TIME</th>
				<th data-options="field:'comments',width:100">COMMENTS</th>
			</tr>
		</thead>

[stworthy]

Please try the code below to define the 'time' column.

Code:

<th data-options="field:'time',width:50,
		formatter:function(value,row){
			return row.nxtsvc - row.mttime;
		},
		styler:function cellStyler(value,row,index){
			var v = parseInt(row.nxtsvc) - parseInt(row.mttime);
			if (v > 5 && v <= 10){
				return 'background-color:yellow;color:red;';
			} else if (v > 10){
				return 'background-color:red;color:yellow;'
			}
		}
">TIME</th>

[swells808]

Close!

The math function works and the first if statement works but it ignores the "else if" part of the code. What is missing?

[chrwei]

shouldn't

Code:

styler:function cellStyler(value,row,index){

be

Code:

styler:function(value,row,index){

 ?