Data Grid: Is it possible to re-order the components?

1
Hi, Is it possible to change the order of the elements in a data grid? I would like the control bar to display below the grid instead of above the grid. Is it possible to move the controls? I am working in Mendix Studio Pro 8.14.1
asked
3 answers
2

You can do so by adding a javascript that you trigger via the addon widget Microflow Timer, or any better way like adding it harcore to your page-templates onDomReady.

The javascript you can copy from the most liked answer of https://stackoverflow.com/questions/2943140/how-to-swap-html-elements-in-javascript#2943189. and the element that you need to pass as “elm” is mx.grid.content. The javascript will mx.grid.content swap places with any element that is above it, lucky for you that is always the mx.grid.controlbar.

Although other suggestions will also do the trick, like this one:

function swapNodes(n1, n2) {

    var p1 = n1.parentNode;
    var p2 = n2.parentNode;
    var i1, i2;

    if ( !p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1) ) return;

    for (var i = 0; i < p1.children.length; i++) {
        if (p1.children[i].isEqualNode(n1)) {
            i1 = i;
        }
    }
    for (var i = 0; i < p2.children.length; i++) {
        if (p2.children[i].isEqualNode(n2)) {
            i2 = i;
        }
    }

    if ( p1.isEqualNode(p2) && i1 < i2 ) {
        i2++;
    }
    p1.insertBefore(n2, p1.children[i1]);
    p2.insertBefore(n1, p2.children[i2]);
}

You might want to hide the element mx.grid.controlbar in the regular styling, to make it not appear at the first page build, and as last action in the javascript make the mx.grid.controlbar visible.

answered
1

Hi Janet,

Unfortunately, with the version of the data grid widget that ships with Mendix Studio Pro 8.14.1 I don’t think it is possible.

You have a few options though.

  1. You could use a list view, place a layout grid in it and the approximate the look and functionality of a data grid. Use the list view controls module in the App Store to make control bar like functionality below the list view. This is fast to implement and works well.
  2. You could write your own pluggable widget using ReactJS that does what you need it to do. Note, this option may take a non-trivial amount of time to implement.
answered
1

I found a very easy way to accomplish what I wanted without JavaScript.

I put a custom class, “grid-controls-bottom” on the data-grid widget.

I added this CSS to my stylesheet.

.grid-controls-bottom {
    display: flex;
    flex-direction: column-reverse;
}

This will reverse the order of the elements contained in the data grid. If you’re showing the search bar, the results might be less than what you want, but because I’m hiding it, this worked very well for me. 

answered