Data Grid Search Bar Not Customizable

Hello, We are using a datagrid in one of our applications and the business users have asked that the “Search” and “Reset” buttons be moved from the left of the search bar to the right under the search field. I have not found a way to do this, even bu messing with the css. This seems like a no-brainer. We should be able to put this in the control bar with all of the other buttons. Any ideas here? Thank you.   BTW, I’m using version 7.21 of the modeler, which is not an option below
3 answers

The Search and Reset are wrapped in mx-grid-search-controls

<div class="mx-grid-search-controls" focusindex="1" dojoattachpoint="searchControlNode">
   <button …."> Search </button><button …."> Reset </button>

Change the ‘float’ of class mx-grid-search-controls from 'right’ to 'left’ and you get this:

That might be close enough for you customer.

If not, then you will still have to move mx-grid-search-controls out of the and just above the mx-grid-controlbar, probably using javascript running at onload with something like this:

$(document).ready(function() {
      width: 413,
      height: 241  //etc.
      width: "70%",
      height: "70%"  //etc.
  }, 3000);

but I don't like that.

Would go with convincing the customer that the first option is the best we can do in Mendix.


Also some nice stuff with flex ordering

.mx-grid-controlbar.clearfix:nth-of-type(0) {
    order: 1;
.mx-grid-controlbar.clearfix:nth-of-type(1) {
    order: 0;
.mx-grid-controlbar.clearfix .mx-grid-pagingbar{
    float: unset!important;
    margin-left: unset!important;
.mx-grid-controlbar.clearfix .mx-grid-toolbar{
    margin-left: auto;


Hi John,

This sounds like a good post for the ideas section. You could link that post back here so people can start upvoting it.