Problems with WebStringGrid (html attributes, and with template)

I have one of my apps with a simple search page, use WebStringGrid on a search result page.
Everything works great, except until I wanted to connect it to a template to make it look like a bootstrap table. Usually I style it with the Delphi or VSC form designer properties.
When I start using HTML atributes then it begins to fail.

I need to make a new application that I offered because all the documentation mentions that it is possible. WebStringGrid does not seem to work. Beware that when running/debugging from Delphi some pages seems to work, but the real test is putting it on the actual web server and thanks god I managed to make it fail in my local WAMP, so I can save time testing.

Things I have discovered that create the fail:

  • If I set ElementID in the designer (for the WebStringGrid). -- Solution is to set the ElementID property on form create.
  • Same for other properties. Among them, FixedCols or FixedRows, these produce the failure when set at runtime or design time.
  • Since I can not set FixedCols anyway, am stuck with a plain looking grid.
    I tried with many versions of Bootstrap, either CDN or downloaded locally to rule out the possibility of having some communication firewall or data lag with the CDN.
    The result is consistent with this failures.
  • Some properties related can be changed without the fail but the result is not what is expected, example: setting the Class to 'table table-dark' works partially. Same for striped table, Etc. All the good looking tables from the bootstrap documentation just do not look even close.

Tried to put it on a template and while filling the data works in the grid ( html table), it looks ugly. And yes, I tried the recommended HTML tag as indicated on the WebCore documentation pdf.

I will try to do tests with other components like the SmartTable which I have license for, or the FNC ones, but It would be great if I can use my already working forms and code, to avoid the extra work. One thing I love about the WebStringGrid is that I can load a Json string into it, and all my web services and program logic are in the same smooth workflow.

Below are a couple of screen shots. One with the template with ugly looking table from the screen grid, and the other screenshot shows the failure when setting the properties mentioned above.

Am sure this is reproducible.
Am working with the latest WebCore and tested in Delphi and VSC as well.


The Json I used to load the data has three columns (name, lastname and profession) and can only see two columns unless I use the scrollbar. The resulting table has an extra space on the right, and looks nothing like a bootstrap table.

I retested several scenarios but could not see an unexpected behavior.

Retested

  1. changing FixedCols at design-time in grid without template binding
  2. changing FixedCols in form OnCreate in grid without template binding
  3. changing FixedCols in form OnCreate in grid with template binding

Test project attached
Project1.zip (5.3 KB)

Bruno,
You are right, your sample project as-is do not fail. As a matter of fact, if I don't attempt binding the grid to a template, all properties work fine.
My main goal with the grid is to bind it to a bootstrap table to have a bootstrap looking table that I can treat internally as string grid and handle it in pascal instead of javascript.
Am including my test project all with the template (it is a free template from bootstrap studio, so there should be not any problem) .
The table there looks as in my previous screenshots, but it should look like the ones n the bootstrap documentation: https://getbootstrap.com/docs/5.0/content/tables/

Please have in mind that if you don't see a failure when debugging in delphi, deploy it to a Wamp server or a live one. Deploying live is when I discovered the problems.
WebStringGridStylingWTemplate.zip (1.4 MB)

We've seen this issue and applied an improvement. Next update will address this.

Great, thanks.