Can i group input with button on form?

Suite and Optimus Suite 7
#1

Something similar to this.
image

My idea would be to click on the button to open a search window, and the return of this window I would set the button.

#2

I used the “icon” property to define an icon, I would like to be able to define more than one icon as in the previous image, but for now this way solves it.

Then I applied an event listener for the click to the icon:

$('.dxi.dxi-magnify').click(function() {
  console.log('test');
});

In this case, I’m using a layout, and attaching a form to a certain cell, which is set to collapse.

However, I realized that the internal content of this cell is only created after it expands. Which causes the event registration not to be applied to the icon.

So, I decided to use the layout’s “afterExpand” event, to then register the icon event.

layoutFilters.events.on("afterExpand", function(id){
     $('.dhx_input__icon.dxi.dxi-magnify').click(function() {
        console.log('test');
     });
});

But I found that the “afterExpand” event is firing before the content expands, similar to the “beforeExpand” event. That shouldn’t happen, right?

I got around the situation using a setTimout, like this:

layoutFilters.events.on("afterExpand", function(id){
     setTimeout(function() {
        $('.dhx_input__icon.dxi.dxi-magnify').click(function() {
           console.log('test');
        });
     }, 1000);
});
#3

An example of the afterExpand event firing before:
https://snippet.dhtmlx.com/cjeoe2io

#4

you may use the button control next to the input:
https://snippet.dhtmlx.com/709p9dc4

#5

You may use the awaitRedraw() helper instead of the custom setTimeout:
https://docs.dhtmlx.com/suite/helpers/await_redraw/