PDA

View Full Version : How to change the background color of the particular grid row?



renganathan
17 Oct 2011, 3:10 AM
Hi everyone,

i want to change the background color of the particular grid row by using some condition . How to do that?

any suggestions?

ferengidedalo
17 Oct 2011, 3:35 AM
You shoud use a renderer, this function receives the value, metadata, record, colindex,store, and view parameters, changing the metadata.tdCls to another class you can change the background color.


xtype : 'gridcolumn',
header : 'Header',
dataIndex : 'data',
renderer : function(value, metadata, record, colIndex,
store, view) {
metadata.tdCls = someclass;
return value;
},

renganathan
17 Oct 2011, 4:24 AM
{id:'isterm_svr', hidden: true, dataIndex: 'isterm_svr',
renderer : function(val, meta, record) { if(val == 'Y')
{
meta.tdCls = 'termsvr'; return val; } } },



.termsvr{ background-color:#CCCCCC; }


Hi , i have share my code . Its not working for me. can you please guide me how to fix this ?

skirtle
17 Oct 2011, 4:40 AM
Personally I wouldn't use a renderer to change the background color for a whole row. I'd do something like this:


Ext.create('Ext.grid.Panel, {
...
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
// Your logic here
return 'custom';
}
}
});


.custom .x-grid-cell {
background-color: yellow;
}

ferengidedalo
17 Oct 2011, 4:59 AM
I agree, take this option is better