GridCellRenderer for CheckBoxSelectionModel column

[smiletolead]

Hi all,
I want to apply custom cell rendering for the CheckBox column in GXT Grid. That is, I am using CheckBoxSelectionModel plugin to GXT grid. I want apply background color to the first cell as well as the rest of the cells. I am doing it through a GridCellRenderer that applies this style. The render method of GridCellRenderer looks like this:


GridCellRenderer<ModelData> selectionRenderer = new GridCellRenderer<ModelData>() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<ModelData> store, Grid<ModelData> grid) {
// config.
if (rowIndex == 4 || rowIndex == 6)
config.style = "background-color:blue;";
else
config.style = "";
return "";
}
};
final CheckBoxSelectionModel<ModelData> sm = new CheckBoxSelectionModel<ModelData>();
sm.getColumn().setRenderer(selectionRenderer);

But this is causing the grid to be rendering improperly. The checkboxes are not rendered properly.
Can anyone please tell me what is wrong in here. Is GridCellRenderer the way to modify the CheckBox column or is there any other way.
The version of GXT I am using is GXT 2.0.1

Regards,
Ganesh

[Arno.Nyhm]

a) you can not set it like this. look into CheckBoxSelectionModel and also in CheckColumnConfig and you can see that there are some default renderers set to render it.

[smiletolead]

I have checked the class CheckBoxSelectionModel. It is creating the CellRenderer as an inner class. If I set my own renderer, this default renderer behavior is overridden.
CheckColumnConfig does not serve my purpose as I want selection feature.

Thanks for your reply,
Ganesh

[Arno.Nyhm]

if your logic is always the same (only the 4th and the 6th row) then you can hack this more easy with css:

but one big note: the nth-child() is not available for all browsers only new browsers support it - so if you use it in intranet applications with a defined range of used browsers then this is ok. otherwise i dont suggest this solution for compatibility reason.



.my-special-format-name .x-grid3-body .x-grid3-row:nth-child(4) .x-grid3-col-checker,
.my-special-format-name .x-grid3-body .x-grid3-row:nth-child(6) .x-grid3-col-checker,
{
background-color: blue;
}

[smiletolead]

The style I want to set is dynamic. I want a method similar to the one provided by GridViewConfig. Using GridViewConfig I can define a CSS class to be used a style for the entire row including CheckBox column. The limitation with GridViewConfig function is that it is not allowing me to provide inline style. I should provide only CSS class which will be static.

Thanks,
Ganesh

[Arno.Nyhm]

i dont understand what you mean with "will be static" and "inline style"?



if you look at this thread

http://www.extjs.com/forum/showthread.php?t=84926&highlight=getRowStyle

then you can use the getRowStyle like this:

17156



grid.getView().setViewConfig(new GridViewConfig() {

@Override
public String getRowStyle(ModelData model, int rowIndex, ListStore<ModelData> ds) {
if (rowIndex == 4 || rowIndex == 6) { // this expression is different in my code
return "my-special-red-format-name";
} else if (rowIndex == 5 || rowIndex == 8){
return "my-special-blue-format-name";
} else {
return "";
}
}
});
(note in return without! dot in css with dot)


and this css:




.my-special-blue-format-name .x-grid3-col-checker
{
background-color: blue;
}

.my-special-red-format-name .x-grid3-col-checker
{
background-color: red;
}

[smiletolead]

I want to assign some style similar to "background-color:red". Here the color 'red' is known at run time. The method provided by you requires that I define the CSS class that declares the background color I use in advance, which is static.

[sven]

You can simple extend checkboxselectionmodel and define your own cellrender, that also adds the dynamic background color.