Help with grid

WEB TMS WEB Core
1

I'm wanting to create a 12 x 9 grid that represents 8 octaves of 12 notes per octave. The idea is you could hold the mouse (or your finger) down and move from one cell to another and the frequency would change. Or you could click the mouse or tap different cells and they'd play that note while the mouse is down. This question isn't about the sound, it's about the UI part.

Using VCL, this is easy. But with the TWebTableControl, there are no OnMouseEnter/Exit or OnMouseDown/Up events. Just OnClick and OnClickCell.

A simlar example would be the grids most cell phones have on the login screen where you can press and move your finger over the grid to signify a pattern, like a star or a box or a Z or something, and that would let you access your phone. I think tapping the cells works just as effectively.

Is the TWebTableControl the wrong thing for that? Is there something better to use?

I'm also having trouble getting the Element tags to do anything. I have:

ElementHeaderClassName = table
ElementTableClassName = table table-hover table-bordered table-striped

But I get nothing that looks like I'd expect -- no grid lines, no stripes, no header color, etc. I got the TableControl demo to work, no problem. But the same settings in my form don't do anything.

I only have the TWebTableControl on a form, without the TWebStretchPanel beneath it (because I don't need it). I hit F12 in Chrome and I can see the HTML code that appears to have the CSS tags properly applied to the table tags. So I must be missing something. Any ideas?

2

To use the CSS classnames of bootstrap, you must have enabled the bootstrap library for the project.

To handle press & move, I believe you might be better of implementing displaying this in a TWebPaintBox and handle the mouse from the OnMouse* events.

3

It turned out to be easier to just create a 9x12 array of small square TWebPanels on-the-fly.