Horizontal scrollbar on data grid

4
Is it possible to have a horizontal scrollbar on a data grid so that more columns can be included of a reasonable size? In the modeller it is only possible to set the relative widths of the columns, but I wondered if it is possible to use the CSS to set an absolute width for the data grid and set overflow to auto, so that the grid is wider than the form area and shows a scroll bar. If this is possible, does anyone have an example of the CSS tags that are needed? Thanks. Edit: The suggestion from Daniel sort of works... in some circumstances. The CSS setting seems to be applied to the whole canvas, so in order to preserve the rest of the form layout, I need to use a horizontal splitter to limit the effects to the data grid only. Unfortunately, I cannot insert a splitter everywhere I would like, such as in tabbed pages. Here is the sort of effect I am trying to achieve: Edit 2: Following the 2nd suggestion doesn't seem to solve the issue either. Here is what it looks like in Mx: Notice that the horizontal scrollbar is below a 2nd linked table and affects the whole tab canvas (the lower table has its own width defined by css class as 700px, the upper table as 2000px). Also the Search/Reset and page controls for the top table are off the screen to the right and can only be accessed by scrolling the whole tab to the right. The desired affect is that the 'outer table' including the search and paging controls and control bar should be the normal size as defined in the modeller, but the 'inner table' of the data rows should scroll inside the outer table if necessary.
asked
1 answers
11

To stretch the DataGrid to more than 100% of its parent, the width attribute of the mendixDataGrid class could be set to the desired width. This could be both a static width or a percentage of its parent.

.mendixDataGrid {
    width: 2000px;
}

This will set the width of all DataGrids to 2000px. If this should not be applied to all DataGrids, you could add a class to your custom theme, which defines the desired width. This class could then be set on the particular DataGrids in the Modeler.

Bear in mind that column widths in the Modeler will still be relative to the DataGrid. All elements in the form with no width specified or a width of 100%, will also stretch to the DataGrid's width.

Edit: To achieve the effect you are looking for, you should instead specify the width on the mendixDataGrid_gridTable class (with a preceding custom class, to avoid all DataGrids get stretched):

.inModelerToDataGridAttachedClass .mendixDataGrid_gridTable {
    width: 3000px;
}

Also add the following css to scroll on the DataGrid its content instead of on the form:

.mendixDataGrid_tablePane {
    overflow-x: auto;
}

Edit 2: For 3.2 onwards, see this forum question: https://forum.mendix.com/questions/3469/New-functionality-in-data-grids

answered