How to overwrite the column width given in Mendix Data Grid?

0
Hi Team, Please advise, how can I overwrite the Data grid column width give in modeler to column width fit with its contents? Personally, want to achieve using percentage property instead of pixel. I’m using ”Data-grid Extension widget” which uses the width in percentage for dynamically show/hide columns. And becomes invalid, if we change Data-grid width property from percentage to pixel as you suggested. Basically, I want my grid columns to fit based on its content (not based on width given in modeler )and using Data-grid Extension widget property. When I debug the widget, found a piece of Java script calculates width and shared equally to the available columns. And I want those column width to fit based on its content instead of shared equally.
asked
3 answers
0

Hi Mugilan,

When you double-click on the grid you can set the Width unit from Percentage to Pixels. Default this is percentage. In the Grid you can drag you columns to give them the right space, or more precisely, type it in in the Edit Grid property screen.

answered
0

Hi Mugilan,

I took a look at the widget you are using and it looks like to achieve what you are looking for will require some custom java work on the widget itself. It also presents a UX issue. If you make the columns widen based on content then some cells will have a lot of empty space, you will also create a situation where users have to scroll further to the right when large data content exists.

Instead of making the width of the column change dynamically I would recomend either using a tooltip and creating a hover box that displays the full content: http://bartgroot.nl/mendix/css-tooltips-in-mendix/ or You may also be able to modify the text to fit the field in the CSS layer using VW units. http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container

Both of these should allow you to make the text visible in a column without having to do the heavy lifting of modifying the widget.

answered
0

An easy solution might be to automatically set the width of all the elements in the element of the table to 'auto' using CSS. You can give your table a class and say:

table.yourClass colgroup col { width: auto; }

answered