View Full Version : [CLOSED] how to add a css class to a cell of gridpanel?

Jun 01, 2015, 8:19 AM
I want to show a gridpanel , when a cell of gridpanel is empty or null , the cell's border color is red.
i try to use render for the column

<ext:GridPanel runat="server" ID="gdHouseCenter" Title="XXX" ForceFit="True" >
<ext:Column runat="server" DataIndex="Unit" Text="所属单元" CellCls="" >
<Renderer Fn="emptyShow"></Renderer>
<ext:TextField runat="server"></ext:TextField>

var emptyShow = function(value,metadata,record,rowIndex,colIndex,s tore,view) {
if (value === null) {
var dataIndex = App.gdHouseCenter.colModel.getDataIndex(colIndex);// here is error , how to correct it?
var color = record.data.colors[dataIndex];
color.colorCls = 'empcls'; //here set a class for the cell , is it right?
return value;

Jun 01, 2015, 9:22 AM
Hi hdsoso

You were on the right track. Update your emptyShow function to this

var emptyShow = function (cellValue, metadata, record, rowIndex, colIndex, store, view) {
if (cellValue == "")
metadata.tdCls = "x-grid-cell-custom";

return cellValue;

You could remove the unwanted parameters if there is no need for them.

Also, the following css class

.x-grid-cell-custom {
border-color: red red red red !important;
border-width: 1px 1px 1px 1px !important;