DataGrid 2 shows columns as rows

0
I had a project in 8.8.1and I really needed a datagrid that was filterable  AND with the data source being “association”, which wasn’t possible. So I decided to convert to 9.7 (had to upgrade to 8.18 first) so I could use the new Data Widgets module; specifically “Data Grid 2”.   I successfully converted to 9.7 without any major issues. I just had to re-download the community commons and deeplink modules due to java errors. Re-downloading got rid of these issues.    i added the new data grid 2 BUT all the columns are showing up as rows.. almost as if the div’s for each “cell” were “float:left” (they’re not). See below. All the headers/filters and data cells are each on their own row instead of being displayed inline.  Technically, the functionality works fine. The sorting and filters all work. The layout is just a mess.  I don’t have any custom styles or anything. I tried to re-download Atlan UI Resources, thinking maybe it would help. When I searched Marketplace I found “Atlas UI Resources  2”. I tried to download it but I get a vague error (screen shot below). Does anyone know what might be causing the cells to be shown on a row instead of side, by side? Below are some screenshots of the screen and html inspection.   Error download Atlas UI 2  
asked
7 answers
2

 

I must have done something out of order the first couple of times. What I did that eventually worked (I swear I did this before, but..) (1) upgrade the project (2) immediately rename the "themes" folder to "themes_2" and then find the Atlas 3 theme (it's a downloadable zip) and drop in there as the new "themes" folder. Then I upgraded my deeplink and community commons modules (just redownloaded and replaced). Then downloaded Atlas Core and the Atlas Web Components/Resources... After that it seemed to work. If datagrid2's or any other CSS is wacked out after an upgrade, it's likely something was just done out of order.

answered
0

I've looked in the CSS of the theme from the app and I see this

.table {
    position: relative;
    border-width: 0;
    background-color: $background-color;

    /* Table Content */
    .table-content {
        display: grid;
        position: relative;

        &.infinite-loading {
            overflow-y: scroll;
        }
    }


It just doesn't look like this  "Grid" display is being implemented. Everything is "block" which makes me wonder if there's some kind of CSS overwriting the css for the widget

answered
0

Did you follow the steps here to install the new Atlas Theme modules as part of the Mx 8 to 9 conversion? https://docs.mendix.com/refguide/moving-from-8-to-9#3-7-update-atlas-module-optional 

answered
0

I can definately tell that the datagrid.scss file is not getting loaded from the themesource/datawidgets/web folder. I can see in a blank dummy project it’s being applied in the developer tools, but in my converted project, it isn’t loading these files.

answered
0

Getting closer. Comparing the two deployment directories…. the new dummy project has two files in the deployment folder: “build_core.html” and  “main.scss” file that references css from other themes, including “@use "themesource/datawidgets/web/main.scss" as module7;”

 

The converted project has only “build_core.html”. 

 

So whatever copies this main.css file to te deployment folder isn’t working in my converted project

 

I manually copied the main.css file over to the deployment directory of the existing project, but no luck. I also took every single folder I could find under the dummy project that referenced the new data widgets module (widgets folder, javascript folder, css, everything) and copied it over to the existing project folders, replacing them and I did get Mendix studio telling me that I had to right click on the datagrid2 widget to update its definition, which I did. Still… no luck. It’s not bringing the widget’s CSS files in.

answered
0

I'd add that this can happen if the DG2 column settings are set to manual width and the total of all the columns does not fit. Switching all columns to autofit-content or auto-fill in the columns appearance tab could also solve the issue.

answered
0

I am having the same issue. I have set and reset all the column column settings and it doesn't fix the issue. I am also seeing some weird behavior in Studio Pro where the column headers do not allign with the column data. It is as if the CSS for the column headers is conflicting with the columns themselves. I am on Mendix 10.18.3 and the Data Widgets 2.30.5. 

 

Follow-up: There was another module DataGrid that was causing the problem. Once I removed that module it started rendering properly.

answered