Is it possible to merge cells in the Grid widget in ThingWorx?

[VP_8991104]

can we merge grid cells in the grid widget.i want to merge some rows as shown below

Related:  post

[VVM_4]

Hi @VP_8991104 ,

Unfortunately, I do not see an easy way to do this. I do not believe the Grid widgets support such a feature where rows only for particular columns are merged.

You could try using a collection within a collection, but if there is a lot of rows and data, that can degrade your mashups performance.

Only other option would be to create a custom grid widget.

Grids are not the easiest to build and maintain. That's why most of the UI frameworks will have grid components pre-built and usually paid. That makes this a complicated and very time consuming task. But, you can try and use an angular component if it gives you the features you are looking for. And package that as a Thingworx widget (Again, slightly high learning curve involved here).

[VVM_4]

I thought about this some more and there is another way. Since your grid described above, does not have complicated buttons, visual elements or functionalities, you could try a classic old school html table.

All you need to do is host a html file on your tomcat, which takes a query parameter with the url and based on that you can query Thingworx and build a html table dynamically using plain javascript or jquery the old school way (using table, td and tr tags). You can then add this html page in a webframe in your Thingworx mashup.

Communicating from Thingworx to your html is straight forward through url query parameters. But from the html to Thingworx and reflecting the change in real time is a bit more complicated, but is doable.

This would prevent your mashup performance degrading like suggested above when there are many rows and a collection was used. As well as, it would not take as much time as creating your own grid widget.

Really curious to know what's the solution you select finally and how it works out.

[DanZ]

This can be relativly easily achieved by using the HTML-renderer for the "Observations" column. Add an additional column to your datashape (like "displayObservations") and set the Basetype to HTML. Then you can add HTML code to this column. For example:

<div style="background-color:red; padding:15px</div>My observation</div>

It get's a bit messy since your basically creating a long String that will be rendered as HTML in the Grid-Widget. So you basically need to create a div that is divided into additional div-Containers based on the amount of obervations for this row. The div-Containers needs to have the same vertical border-color as the Grid-Widget, so it looks good.

I have done something similar with a bit more complex design. It it working fine... like I said: the HTML-Strings are a bit annoying.

If you have no observations for a row, than you just leave the column blank.