topic Re: Dynamic Grid Column Width in ThingWorx Developers

Dynamic Grid Column Width

SZ_10833245 — Thu, 28 Nov 2024 09:39:47 GMT

Hello,

I am trying to adjust the grid column width to fit the maximum text/Icons size it contains. I want to remove the extra space from the column, as shown red box in the image below.

Currently, I have set column width to 'Auto' but it is not working.

Is there any way to do this?

Thanks,

Suraj

Re: Dynamic Grid Column Width

PEHOWE — Mon, 02 Dec 2024 19:55:46 GMT

Hello @SZ_10833245 ,
Setting the width of a column in a grid is a complex process.
The space allocated for the grid is divided among the display columns. The size of the titles, can make a column wider is some cases.

The UI will not leave blank space at the end of the grid. The grid will be expanded to fill the space allocated. In general the last column will be wider to fill in the space.
In some cases the space will be spread across all the columns to give an eye pleasing distribution.
Where would you have the space which is removed from the "Content Type" column added?

Regards,
Pehowe

Re: Dynamic Grid Column Width

SZ_10833245 — Tue, 03 Dec 2024 06:15:23 GMT

Hello @PEHOWE,

Thanks for your reply

The values in the 'Content Type' column are dynamic, meaning the number of icons it contains is not fixed. The column width shall be dynamically adapted to the maximum number of icons over all rows. The space that is removed from the 'Content Type' column can be added to the 'Description' column.

Regards,

Suraj

Re: Dynamic Grid Column Width

Bikash_Panda — Tue, 03 Dec 2024 13:29:43 GMT

Hey @SZ_10833245 , If you want comeplete control over the grid in runtime, you may look for JSON based configuration using a service. But this will definitely increase the complexity of your app, but you can customize the app as per you need. I persoanlly use that in one of my project is and really helpful do configure the grid, entirely from backend.

Re: Dynamic Grid Column Width

PEHOWE — Tue, 03 Dec 2024 14:39:11 GMT

Hello @SZ_10833245 ,
To get the look which you are looking for the approach described by @Bikash_Panda may be the best.
The Article - CS391327 - Edit a ptcs-grid created with a dynamic configuration in ThingWorx Platform has a discussion and a link to the online help documentation.
In your original post, you set the column width to Auto. How do you expect the column widths to be set?

Regards,
Pehowe

Re: Dynamic Grid Column Width

PEHOWE — Fri, 13 Dec 2024 15:24:57 GMT

Hello @SZ_10833245 ,

I understand that the column widths in the grid are not being set as you desire. The option you have selected "Auto-Width" is described in the on line documentation Configuring Grid Columns

Column Width—Sets the column width. By default, the available space is divided equally between columns.

This explains why the column you have identified is wider then you expect.

Please post if this resolves the issue.

Regards,

pehowe

Re: Dynamic Grid Column Width

javed_a — Mon, 16 Dec 2024 05:48:33 GMT

Hello,

Instead of auto width you may try Custom Width for the particular column and allocate max possible width in px or %.