How can I use checkboxes in a table column?

So far the table element does not support chekbox column directly, yet you can workaround it by using an empty column and put some checkboxes on it.

Here is my example:

The table content looks like these:
Id,Product,Count,Shipped
01,GnRaiser,45
02,GnCore,135
03,WindRx,123
The header line has one more segment, so you will get an empty column.

Thanks for the tip. For now that solves my problem. I think it would be a good idea to support it though, maybe using [ ] for unselected and [x] for selected or something?

For rendering, using [] and [x] to reprensent checkbox is ok, yet it is hard to support actions for chekboxes within table. We are considering the solution…

Good point. For now I’d already be happy with an easy way to render it, but I agree that it’s a good idea to think a bit about it, would be awesome if it’d be actionable.

I’ve been using your suggested approach, but in a recent project (or recent ForeUI build, not sure what’s causing it) it’s giving me positioning issues: http://www.cygno.com/remco/2010-03-15…

I’m using ForeUI 2.15.

Hi Remco Douma,

The reason that cause positioning issue is the “incompleted row” in table element.

Here is a screenshot of the design phase:

You can see there is an incomplete row (marked with green) at the bottom of table. When you run simulation, you will see the incomplete row is removed:

The browser re-layout the table, so each row become higher, so your checkbox elements can not match their loaction…

The work around is: make sure your table has no “incomplete row”, you can change the table row height, or change the table element height to achieve this.

That is an excellent answer, thank you. It indeed solved my issue. I had explicitly included half a row to illustrate the idea that the amount of rows visible would “extend”, but this is certainly workable enough.

The table element can accept embedded elements from V2.22, so you can hold right key to drag checkbox into a table element.

The “incomplete row” issue is fixed in V2.30

Great, and at first glance 2.30 feels much less buggy in actually adding checkboxes to the table than 2.22, where they would sometimes seem to disappear. Thanks!

I’ve just played a little aroud with the table and checkboxes, and in the newest version (2.302) I’m actually experincing some issues:

1. when right-clicking and dragging a checkbox to the table, the checkbox sometimes disappears on release
2. and sometimes the checkbox is placed in the row above

See the video:
http://www.egholm51.dk/foreui/TableAndCheckb…

Hi Ulrich, in your video I can not see the issue 1 (checkbox disappears), but I do see the issue 2 (checkbox placed in the row above).

The reason is that we use the top-left corner of the checkbox as the “hotspot”, when the hotspot is very closed to the border between two rows, sometimes the cursor will enter the row above when you release the mouse. So a better way is to move the hotspot into the center area of the target cell.

However we may improve this by remembering the last highlighted cell and make sure the checkbox will be embedded into that cell. We will investigate on this.

I don’t have a video showing the checkbox disappearing, but it happened twice while I was playing around. Howver, I couldn’t reproduce it once I began recording.

“sometimes the cursor will enter the row above when you release the mouse. “

I was very careful not to move the mouse on release, so I don’t think that is the issue.