I've been playing around with turbogears.widget.grid for a few days,
pushing it to see how far I can push it.
I've been using it to have a kind of "ClickyGridWidget" - where users
can mouse over and click rows to expand them.
I've come across some troubles using javascript for mouseovers that we
recently resolved, and I thought I'd give the solution to back to the
community.
The main one was the header row was being highlighted in IE because it
was still using TR's, so we couldn't easily differentiate between
header and data. This was fixed by using th tags instead of tr tags.
I also expanded it so that it used tbody tags as well as thead - if
we're going to use one , we may as well use the other too :)
I'm not sure who to direct this to, so here's an amazingly long patch
against turbogears/widgets/grid.py
Have fun!
I'll create a proper widget to implement this kind of behaviour soon -
I'm starting to find it immensely useful!
--- turbogears/widgets/grid.py 2005-12-16 13:50:49.000000000 +0000
+++ turbogears/widgets_new/grid.py 2005-12-16 13:54:43.000000000
+0000
@@ -11,15 +11,17 @@
<link href="/tg_static/css/widget.css" type="text/css"
rel="stylesheet" />
<table id="${widget.name}" class="grid" cellpadding="0"
cellspacing="1" border="0">
<thead py:if="widget.headers">
- <td py:for="head in widget.headers">
+ <th py:for="head in widget.headers">
${head}
- </td>
+ </th>
</thead>
- <tr py:for="i, row in enumerate(widget.rows)" class="${i%2 and
'odd' or 'even'}">
- <td py:for="cell in row">
- ${cell}
- </td>
- </tr>
+ <tbody>
+ <tr py:for="i, row in enumerate(widget.rows)" class="${i%2 and
'odd' or 'even'}">
+ <td py:for="cell in row">
+ ${cell}
+ </td>
+ </tr>
+ </tbody>
</table>
</div>
"""
