0

Grid TD background color

asked 2008-09-12 13:31:38 +0800

dastultz gravatar image dastultz
797 8

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

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2008-09-12 15:41:29 +0800

dastultz gravatar image dastultz
797 8

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

link publish delete flag offensive edit

answered 2008-09-19 05:00:16 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

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()

link publish delete flag offensive edit

answered 2008-09-19 17:34:44 +0800

dastultz gravatar image dastultz
797 8

I'm a bit confused. It sounds like I can apply a CSS class to all TD's in the row using this approach, but I want to make, say the third cell of the second row a different CSS.

/Daryl

link publish delete flag offensive edit

answered 2008-09-21 01:49:16 +0800

dastultz gravatar image dastultz
797 8

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

link publish delete flag offensive edit

answered 2008-09-22 03:57:07 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

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.

link publish delete flag offensive edit

answered 2008-09-22 21:39:23 +0800

dastultz gravatar image dastultz
797 8

I've opted to call row.invalidate(). Not the most efficient, but it has solved the problem.

/Daryl

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2008-09-12 13:31:38 +0800

Seen: 493 times

Last updated: Sep 22 '08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More