Title: jQuery EasyUI DataGrid – Set Row Background Color Conditionally
# jQuery EasyUI DataGrid - Set Row Background Color Conditionally
This tutorial will show you how to change the row style of the DataGrid component based on certain conditions. When the `listprice` value is greater than 50, we will set a different color for that row.
The `rowStyler` function of the DataGrid is designed to allow you to customize the row style. The following code demonstrates how to change the row style:
| Item ID |
Product ID |
List Price |
Unit Cost |
Attribute |
Stauts |
```javascript
$('#tt').datagrid({
rowStyler:function(index,row){
if (row.listprice>50){
return 'background-color:pink;color:blue;font-weight:bold;';
}
}
});
As you can see, we set the `background-color` to pink and the text color to blue based on certain conditions.
Download jQuery EasyUI Example
jeasyui-datagrid-datagrid18.zip
YouTip