EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: swells808 on September 28, 2014, 05:23:33 PM

Title: Is there a Cell styler function?
Post by: swells808 on September 28, 2014, 05:23:33 PM

So I have figured out how to use row styler for an entire row but what if I want to color just a cell on conditional content?

For example my columns are date, cycle, destination, depart, and arrive. I want to set the condition that if the date is greater than 09/01/2013 i only want the cell of the dates to appear green how do I do this without styling the entire row?

Title: Re: Is there a Cell styler function?
Post by: stworthy on September 28, 2014, 06:13:36 PM

Please see this example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=DataGrid%20Cell%20Style

Title: Re: Is there a Cell styler function?
Post by: swells808 on September 28, 2014, 06:31:57 PM

Thank you thats very helpful. The only question I have from here is what if I want to apply this style to only a specific column?

Title: Re: Is there a Cell styler function?
Post by: stworthy on September 28, 2014, 07:03:37 PM

To set cell style for a column, please apply the 'styler' function to that column.

Code:

<th data-options="field:'listprice',width:80,align:'right',
        styler: function cellStyler(value,row,index){
            if (value < 30){
                return 'background-color:#ffee00;color:red;';
            }
        }
">List Price</th>

Title: Re: Is there a Cell styler function?
Post by: swells808 on October 02, 2014, 02:52:52 PM

Thank you for your help. The next step for me is how do I setup multiple conditions. So for example in a cell if the value is > yellow or > 5 turn red?

Title: Re: Is there a Cell styler function?
Post by: Pierre on October 08, 2014, 09:53:30 AM

stworthy posted nice example, you need only to add your conditions, like
if (condition)
{
return '...
}
else
{
return 'something else
}

Title: Re: Is there a Cell styler function?
Post by: swells808 on October 08, 2014, 02:05:27 PM

Yes and you've all been so helpful thanks. The final formula that is working perfect in case anyone needs it is

Code:

styler:function cellStyler(value,row,index){
	var v = parseInt(row.nxtsvc);
	if (v > 5 && v <= 10){
		return 'background-color:yellow;color:red;';
	} else if (v > 10){
		return 'background-color:red;color:yellow;'
	} else {
		//...
	}
}