WebListBox Table

I need a web table with
1)10 columns
2)one which has a check box
3)each row can have more than one line
4)each row can have a different background color.
5)variable number of rows.

Is this possible with a webListBox or do I need to roll my own.

Any pointers would be appreciated.

At the moment you’ll need to roll your own.

One way would be to create a WebContainer sub-class that matches your row layout, and then have another WebContainer sub-class that is your new custom listbox. In the new listbox create new instances of the row container with correct data and then use EmbedWithin to add to the listbox.

There’s an example or two bundled with the Xojo IDE that are worth a look, the WebGridContainer project in particular might be useful (Web / Containers / WebGridContainer).

Thanks Ian. That look like a good start. Now I need to be able to figure our the length, in pixel, of the data to figure out the number of lines a string will require.

If you’re going to show text drawn in a canvas (WebPicture) that’s fine, as long as you know the width of the canvas you can work out the height of the drawn text and then re-size the row’s canvas / own height to then draw the text into.

However, if you want to use a WebLabel then you’ll run into problems as each browser will want to render the text as a slightly different height no matter whether you specify pixels or not, so you’ll need to use a little javascript to find a new height for the web label as with Xojo you can’t use the usual flexible CSS for getting text in the middle or for padding a container out.

If you generally have a similar amount of text, you can compromise with a standard width height that covers most scenarios and then maybe use ellipses or something to indicate that the text has been truncated if it gets a little long.

You can do all of that except the check box. I just use a clickable + sign in my first column.

Regular fonts provide two characters available to all browsers that maybe could be used for a pseudo check box : ?? (&u25A1) and ? (&u221A).

After more study and testing have decided that a weblistbox will do what I want to do.