2

I have a DataGrid with a search function and I want the Website to automatically refresh the grid with every key pressed in the search bar, just like modern search engines do. Imagine it like Pressing enter after every key pressed, or clicking on the search button. The only way in Mendix to do it is with external Widgets (cant use them cause most of them Arent able to search for related entities in the database) or to use JavaScript Snippets which I did.

I have already tried to programmatically press enter, but I cannot get the Code to do it.

Another Option I tried was to programmatically click the search bar after every key pressed which in itself works but the Problem here was that the selection jumps out of the Input field and onto the search button and there is also no Input in the search field.

Option 1: Programmatically clicking the search button

defining the Elements on the page

var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField1')
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')

defining the function

function clickSearchButton() {
searchButton.click();
};

triggering the function with every Change in the input

itemsSelect.onkeypress = function(){clickSearchButton};

Option 2: Programmatically hit Enter

It's Pretty much the same Code as above and the way I would prefer it.

I tried many variants but the only Thing I want in the end should look like this:

itemsSelect.onkeypress = function(){*call a function to programmatically press enter*};

I tried Solutions from all over the place for example:

Is it possible to simulate key press events programmatically?

I want to press enter key by programmatically when user do some stuff in js

and many other Sources, some claiming that it is not possible because of security reasons. Is that true?

I'm trying to solve this since around two weeks, with Pretty much no success. Have I overlooked anything, is there another solution that I did not think of? Not using Mendix is not an Option. It's for a huge Project at work.

Ali Kilicaslan
  • 21
  • 1

1 Answers1

0

First, figure out the class and the id of the textfield and the button you are interested in. Usually those start with mx-name- prefix. In this example they are called mx-name-confirmPasswordInput and mx-name-confirmChangePassword.

Then, use the HTML Snippet custom widget to insert this piece of Javascript in your page:

(function() {
    document.addEventListener("keydown", function(e) {
        if (e.keyCode !== 13) return; // ignore if the pressed key is not 'Enter' key.
        var inputField = document.querySelector(".mx-name-confirmPasswordInput input");
        var btn = document.querySelector(".mx-name-confirmChangePassword");
        if (inputField && btn && document.activeElement === inputField) {
            inputField.blur && inputField.blur(); // not necessary any more in 7.22 and up
            btn.click();
        }
    });
})();

That should do the trick!

reinouts
  • 384
  • 3
  • 14