-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hello, let's say I have a Tic Tac Toe Grid (3x3). I want to change the background color of the center cell. Since there is no GridCell or RowCell object, you just add your component to the Row and it gets wrapped with a TD element, there is nothing to apply an Sclass to. I've tried various CSS approaches including DIV tag with height 100% but this doesn't work unless the TD has a height. I don't want to specify a height for the TD because I want it flexible.
If there is no CSS solution to this problem, I'd like to propose this: create a RowCell class. If RowCell is added to Row, use it as the TD, then I can just apply my CSS to the individual RowCell. Otherwise, perhaps row could have setSclasses analogous to setSpans which allows specification of CSS to apply to each TD in the row.
Comments?
/Daryl
I have implemented a workaround (AKA "hack"). I've written a component renderer that mimics the DSP. If the child added to the row has an attribute "tdSclass" the attribute is added to the class property of the td tag.
public void render(Component comp, Writer out) throws IOException {
Row self = (Row) comp;
out.write("<tr z.type=\"Grw\" id=\"" + self.getUuid() + "\"" + self.getOuterAttrs() + self.getInnerAttrs() + ">");
Iterator iter = self.getChildren().iterator();
for (int index = 0; iter.hasNext(); index++) {
Component child = (Component) iter.next();
out.write("<td z.type=\"Gcl\" id=\"" + child.getUuid() + "!chdextr\"");
String colAttrs = org.zkoss.zul.fn.ZulFns.getColAttrs(self, index);
Object tdSclass = child.getAttribute("tdSclass");
if (tdSclass != null) {
// add the tdSclass attribute to the class property
colAttrs = colAttrs.replaceAll("(.*class=\")(.*?)(\".*)", "$1$2 " + tdSclass + "$3");
}
out.write(colAttrs);
out.write(">");
out.write("<div id=\"" + child.getUuid() + "!cell\" class=\"" + self.getMoldSclass() + "-cnt");
if (self.getGrid().isFixedLayout()) out.write(" z-overflow-hidden");
out.write("\">");
org.zkoss.zk.fn.ZkFns.redraw(child, out);
out.write("</div>");
out.write("</td>");
}
out.write("</tr>");
}
/Daryl
Hi,
In ZK 3.5.0, you can use CSS to control the TD where is embedded inside the Row component.
For example,
z-row-inner {
// dothing CSS
}
The z-row is a CSS name from Row.getMoldSclass()
My ComponentRenderer is working fine for the first render phase. Now I want to replace components in a rendered row. It seems the re-rendering of child components does not go through my renderer (which makes sense since my renderer does the whole row). What is the mechanism responsible for this? It seems I have something else I need to apply this trick to.
/Daryl
Hi Daryl,
If you want to customize some special cells, you cannot use the CSS rule I mentioned.
In a special case, there is a method called Row.onDrawNewChild() to do some extra code for re-rendering its child, you should override this method.
Asked: 2008-09-12 13:31:38 +0800
Seen: 494 times
Last updated: Sep 22 '08