Align Column Selector Button (Eye Icon) Above DataGrid 2 Table

0
I am using DataGrid 2 in my mendix 10.6.10 application .By default, a column selector button (represented by an eye icon) appears above the table on the top-right corner. This button allows users to show/hide columns dynamically, which is a built-in feature of DataGrid 2.   I want to change the alignment/position of this eye icon column selector button (e.g., move it to the center or align it differently above the table).Currently, it is always aligned to the right, and there is no option in Studio Pro to change its position.
asked
3 answers
3

To change the alignment/position of the eye icon column selector button in DataGrid 2, you can't use the Studio Pro options. try to use CSS to override the default styling of the grid.

You can add a class to the DataGrid 2 and in the Inspection window, you can try to overwrite the grid-template-column property to change the layout and positioning of the columns.

**To change the column size from manual to auto-fill, try setting grid-template-columns to a value such as 1fr.

**To move the eye icon column selector button, you can try setting the flex-direction of its parent container to row-reverse, so that the button appears at the end of the row.

Try below css.

.data-grid-container

{  grid-template-columns: 1fr; 

flex-direction: row-reverse;  /* add your custom styles here */

}

answered
1

Hi Mallikarjun, you're right in Mendix 10.6.10, the DataGrid 2 widget provides the column selector (eye icon) as a built-in feature, but its position is hardcoded to be right aligned at the top of the grid. Mendix Studio Pro doesn’t offer a setting in the properties panel to change this alignment.

However, you can reposition the column selector using custom CSS.

 

Identify the Right Selector

The column selector button is typically inside a container with a class like. .column-selector. But it’s better to scope your CSS so it only affects your specific grid (if needed).

Start by assigning a custom class to your DataGrid 2 widget:

  • Select the DataGrid 2 in Studio Pro

  • Go to Common → Class

  • Add a custom class name, e.g., my-custom-grid

 Add Custom CSS

You can then add CSS to your app's styling (via a main.scss file or using custom classes in Atlas UI).

Here’s an example to center the column selector icon:

.my-custom-grid .datagrid2-header-actions

{ 

justify-content: center !important;

}

 

I hope this one helps you! :)

answered
0

Hi Mallikarjuna,

 

There is no out of the box solution for this, but it is possible through custom css. we can write custom css and fix the position of the eye icon for Data Grid

 

Regards,

Ajay

answered