PDA

View Full Version : applying multiple css in grid cell



raj_plays
7 May 2014, 5:55 AM
Hi,
I need to apply 2 css classes in my grid's column.
The first css('x-link') makes the text in the grid a hyperlink and the second sets the background and font color.
The color depends on the value but the hyperlink will always be there.
I tried the code below. Didn't work.


{
header: "Artist Display Name",
width: 140,
dataIndex: 'ArtistDisplayName',
sortable: true,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {


metaData.css = 'x-link';


if (value == '')
return '<i>Add display name</i>';
else {
if (record.data.ArtistDisplayNameEdited)
metaData.css += 'cell-green';
else if (record.data.scrub)
metaData.css += 'cell-blue';
else
metaData.css += 'cell-red';


return value;
}


},
align: 'left'
}


Please help.

mitchellsimoens
19 May 2014, 10:43 AM
This renderer is working for me:


renderer : function(value, meta, record) {
var css = 'x-link';

if (value == '') {
value = '<i>Add display name</i>';
} else {
if (record.get('ArtistDisplayNameEdited')) {
css += ' cell-green';
} else if (record.get('scrub')) {
css += ' cell-blue';
} else {
css += ' cell-red';
}
}

meta.css = css;

return value;
}