Skip to main content
S
SZ_108332457-Bedrock
7-Bedrock
November 28, 2024
Solved

Dynamic Grid Column Width

  • November 28, 2024
  • 4 replies
  • 1161 views

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.

 

SZ_10833245_0-1732786455913.png

 

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

SZ_10833245_1-1732786597961.png

 

Is there any way to do this?

 

Thanks, 

Suraj

 

Best answer by PEHOWE

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

 

4 replies

P
PEHOWE17-Peridot
17-Peridot
December 2, 2024

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

 

S
SZ_108332457-BedrockAuthor
7-Bedrock
December 3, 2024

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

B
Bikash_Panda14-Alexandrite
14-Alexandrite
December 3, 2024

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.

P
PEHOWE17-PeridotAnswer
17-Peridot
December 3, 2024

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

 

P
PEHOWE17-Peridot
17-Peridot
December 13, 2024

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

J
javed_a13-Aquamarine
13-Aquamarine
December 16, 2024

Hello,

 

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

Terms & ConditionsCookie settingsAccessibility statement