[2.0] Colorize row with GridCellRenderer

[mtarantini]

Hi,

I'd like to know how to colorize the GridView (like the stripeRow does) but on the row and depending of a certain property of my model.

I try to use the GridCellRenderer, the code below doesn't work



GridCellRenderer<PropertyModel> cellRenderer = new GridCellRenderer<PropertyModel>()
{

/**
* @see com.extjs.gxt.ui.client.widget.grid.GridCellRenderer#render(com.extjs.gxt.ui.client.data.ModelData, java.lang.String,
* com.extjs.gxt.ui.client.widget.grid.ColumnData, int, int, com.extjs.gxt.ui.client.store.ListStore, com.extjs.gxt.ui.client.widget.grid.Grid)
*/
@Override
public Object render(PropertyModel model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<PropertyModel> store,
Grid<PropertyModel> grid)
{

if (model.get(property) instanceof String)
{
grid.getView().getRow(rowIndex).setAttribute("backgroundColor", "blue");
}
return model.get(property);
}
};


I get an exception on the shell :

Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError): Cet objet ne gère pas cette propriété ou cette méthode
number: -2146827850
description: Cet objet ne gère pas cette propriété ou cette méthode
at com.google.gwt.dom.client.Element$.setAttribute$(Native Method)
at com.comarch.web.app.faultmanagement.client.app.FaultView$2.render(FaultView.java:122)
at com.comarch.web.app.faultmanagement.client.app.FaultView$2.render(FaultView.java:1)
at com.extjs.gxt.ui.client.widget.grid.GridView.getRenderedValue(GridView.java:982)
at com.extjs.gxt.ui.client.widget.grid.GridView.doRender(GridView.java:835)
at com.extjs.gxt.ui.client.widget.grid.GridView.renderRows(GridView.java:1535)
at com.extjs.gxt.ui.client.widget.grid.GridView.afterRender(GridView.java:654)
at com.extjs.gxt.ui.client.widget.grid.Grid.afterRenderView(Grid.java:619)
at com.extjs.gxt.ui.client.widget.grid.Grid$1.run(Grid.java:609)
at com.google.gwt.user.client.Timer.fireImpl(Timer.java:160)
at com.google.gwt.user.client.Timer.fireAndCatch(Timer.java:146)
at com.google.gwt.user.client.Timer.fire(Timer.java:138)

So, any idea to colorize each row separately ?

Thx you in advance.

[sven]

There is not yet that row. Try to do

grid.getView().getRow(rowIndex).setAttribute("backgroundColor", "blue");
in a deferredcommand.

[mtarantini]

I've test this :


GridCellRenderer<PropertyModel> cellRenderer = new GridCellRenderer<PropertyModel>()
{

/**
* @see com.extjs.gxt.ui.client.widget.grid.GridCellRenderer#render(com.extjs.gxt.ui.client.data.ModelData, java.lang.String,
* com.extjs.gxt.ui.client.widget.grid.ColumnData, int, int, com.extjs.gxt.ui.client.store.ListStore, com.extjs.gxt.ui.client.widget.grid.Grid)
*/
@Override
public Object render(PropertyModel model, String property, ColumnData config, final int rowIndex, int colIndex, ListStore<PropertyModel> store,
final Grid<PropertyModel> grid)
{

DeferredCommand.addCommand(new Command()
{

/**
* @see com.google.gwt.user.client.Command#execute()
*/
@Override
public void execute()
{
grid.getView().getRow(rowIndex).setAttribute("backgroundColor", "blue");
grid.getView().refresh(true);
}
});

return model.get(property);
}
};


But it doesn't work. The property name has to be in "Camel Case" or the same as a CSS File ?

[sven]

grid.getView().refresh(true);

That line will force to rerender the view and as you have that in a renderer, this will end in a endless loop.

Also not that you are setting an element attribute. not a style attribute:


grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", "blue");

[mtarantini]

Okay, I understand why the shell lag (because of the infinite loop).

It's working real fine now...thanks a lot.

[Arno.Nyhm]

can you post your full working code?

[mtarantini]

Here it is :



// Cell Renderer for coloration.
GridCellRenderer<PropertyModel> cellRenderer = new GridCellRenderer<PropertyModel>()
{

/**
* @see com.extjs.gxt.ui.client.widget.grid.GridCellRenderer#render(com.extjs.gxt.ui.client.data.ModelData, java.lang.String,
* com.extjs.gxt.ui.client.widget.grid.ColumnData, int, int, com.extjs.gxt.ui.client.store.ListStore, com.extjs.gxt.ui.client.widget.grid.Grid)
*/
@Override
public Object render(final PropertyModel model, String property, ColumnData config, final int rowIndex, int colIndex,
ListStore<PropertyModel> store, final Grid<PropertyModel> grid)
{

DeferredCommand.addCommand(new Command()
{

/**
* @see com.google.gwt.user.client.Command#execute()
*/
@Override
public void execute()
{
if (model.get("acknowledge").equals("F"))
{

if (model.get("perceivedSeverity").equals("0"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.INDETERMINATE_NEW);
}
else if (model.get("perceivedSeverity").equals("1"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.CRITICAL_NEW);
}
else if (model.get("perceivedSeverity").equals("2"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.MAJOR_NEW);
}
else if (model.get("perceivedSeverity").equals("3"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.MINOR_NEW);
}
else if (model.get("perceivedSeverity").equals("4"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.WARNING_NEW);
}
else if (model.get("perceivedSeverity").equals("5"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.CLEAR_NEW);
}
}
else
{
if (model.get("acknowledge").equals("T"))
{

if (model.get("perceivedSeverity").equals("0"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.INDETERMINATE_ACK);
}
else if (model.get("perceivedSeverity").equals("1"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.CRITICAL_ACK);
}
else if (model.get("perceivedSeverity").equals("2"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.MAJOR_ACK);
}
else if (model.get("perceivedSeverity").equals("3"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.MINOR_ACK);
}
else if (model.get("perceivedSeverity").equals("4"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.WARNING_ACK);
}
else if (model.get("perceivedSeverity").equals("5"))
{
grid.getView().getRow(rowIndex).getStyle().setProperty("backgroundColor", FaultManagementApp.CLEAR_ACK);
}
}
}
}
});

return model.get(property);
}
};


It's juste the GridCellRenderer, but it's enough to understand how it's works.

[Arno.Nyhm]

thx :-)