How do you hide (empty) in Drop-down Search Fields of Data Grids

0
Since the upgrade from Mendix 7.23.19 to Mendix 8.17.1 the enumeration value (empty) appears in every Drop-down Search Field of all Data Grids. Is there a solution to hide the (empty) value?
asked
4 answers
2

Hi Mats,

You can use the following JavaScript code with the HTML Snippet widget. Put this at the bottom of your page. 

mx.addOnLoad(function () {
    var searchDropDownList = document.querySelectorAll('.mx-grid-search-item select');
    for (var i = 0; i < searchDropDownList.length; i++) {
        // Get the ID from the parent parent
        var searchDropDownID = searchDropDownList[i].parentElement.parentElement.id;

        // Search for the option where the value ends on a _, that is the option value for (empty)
        var emptyOption = searchDropDownList[i].querySelector('[value=' + searchDropDownID + '_]');
        if (emptyOption) {
            searchDropDownList[i].removeChild(emptyOption);
        }
    }
})

I’ve set the following options:

  • Refresh on context change: Yes
  • Refresh on context update: Yes
  • Enclose HTML with DIV: No

 

I’ve tested it in Studio Pro 8.12.5.

Cheers,

Jeffrey

answered
1

you can add a class like this, and add the class name (without the dot) on the appearance in the data grid

 

.~1 {

    .mx-grid-search-input {

        select {

            // display: none;

        }

        option {

            display: none !important;

        }

        option[value*="~2"] {

            display: block !important;

        }

        option[value*="~2"] {

            display: block !important;

        }

    }

}

 ~1: class name-- the first letter in the class name must be lowercase

 ~2: the value in the enum, it must be the name for the value (not the caption) and it must be written as the name exactly  

answered
0

You can use this script will work on both single and multiple select

 

mx.addOnLoad(function () {    var searchDropDownList = document.querySelectorAll('.mx-grid-search-item select');    for (var i = 0; i < searchDropDownList.length; i++) {        // Get the ID from the parent parent        var searchDropDownID = searchDropDownList[i].parentElement.parentElement.id;

        // Search for the option where the value ends on a _, that is the option value for (empty)        var emptyOption = searchDropDownList[i].querySelector('[value=' + searchDropDownID + '_]');        if (emptyOption) {            searchDropDownList[i].removeChild(emptyOption);        }    }

 })

$('.mx-selectbox').bind('click', function() {var listItems = $(".mx-dropdown li");

console.log(listItems.length);listItems.each(function(idx, li) {    var product = $(li);console.log(product);if($(li).find('label').length){var val = $(li).find('label').text();if(val == '(empty)'){$(li).remove();return false;}

}});

}); 

answered
0
.mx-grid-searchbar {
    .mx-grid-search-item{
	select {
	option[value$=_]{
               display: none;
                }
            }
      }
}

I noticed that the (empty) option on the search field has a value ending with _ (underscore).

Using nth-child specific the number (=2) might affect to the reference field according to there's no empty option in it.

I use this code (scss) in the project, and it works for all data grids at once.

 

Hope this helps!

answered