How Can I Ensure Full Visibility of Column Headings in Data Grid 2?

0
I’m currently working on a project using Mendix Studio Pro (version 10.6.5), and I’m using Data Grid 2 to display data. I’ve noticed that some of the column headings are truncated, shortened, or missing text entirely, which makes it difficult for users to understand the context of the data. I’d like to ensure that: All column headings are fully visible (not shortened or truncated). Column headings can wrap text if they are too long for the available space. The grid adjusts nicely without breaking the layout, even when many columns are present. Could someone guide me on how to configure Data Grid 2 to achieve this? Specifically, I’d like to know how to adjust column widths, enable text wrapping, and apply any relevant styling if required. Any tips or best practices would be greatly appreciated! Thank you in advance!   This is how my project currently looks:   This is how I would like it to look:
asked
3 answers
0

Hi! You can double click on the column and indicate how much space you want this column to take and if you want to text to be wrapped or not.

image.png

 

Hope this helps :)

answered
0

Create a class e.g. "datagrid-wrap-headers" in your scss files and put the class on your datagrid in the appearance tab.

Something like:

.datagrid-wrap-headers .th .column-header span {
  text-wrap: wrap;
}

 

answered
0

Hi Matthew,

 

Matthias already gave you some tips, but if you want your column header title to be wrapped if the content takes up more than the available space, you should adjust the following:

 

Schermafbeelding 2025-01-28 160415.png

Above you see a portion of the out-of-the-box DataGrid2 styling. The 'text-wrap: nowrap' needs to be adjusted to 'text-wrap: wrap' to get your desired result. Note that the 'Wrap text' option in the appearance tab only works for the content within your table rows, and not your table header(s).

answered