w2grid: Set position of advanced search (when toolbarSearch is false and triggering elsewhere?)

[wtmorrison]

I don't want to allow the "Search All Fields" so I hid it and trigger searchOpen with a button.

Is there any way to set the position? The Advanced Search appears nowhere near the button.

[wtmorrison]

Answering my own question. By searching w2grid.js, I found this can be done by setting the text of a toolbar button to include a div with a specific id value.

If the grid name is "mygrid" then the text of the button would be:

text: '<div id="grid_mygrid_search_all">Search</div>'

That's what searchOpen is hard-coded to look for. '#grid_'+ this.name +'_search_all' If you've hidden the search box (toolBarSearch: false) that div won't exist and you can create it in the text of a button.

Substitute the name of your grid for "mygrid".

It's a hack, but it works, haven't found any side effects yet.

Would be nice to be able to specify the anchor, but I'll just proceed with this.

Other than that, w2ui is a very nice library, gives me 80-90% if what I need, I still end up fighting it when I try to customize things (like this) but I usually find a way, or if not then an alternative.

[vitmalina]

https://w2ui.com/web/docs/2.0/w2grid.show - you should be able just to set grid.show.searchAll = false

[wtmorrison]

Tried that, not quite what I want.

That searches only one field but still shows the text box. I don't want the text box at all.

I'm hiding it (grid.show.toolbarSearch = false) and calling .searchOpen() from a toolbar button.

The hack I described lets the grid find the button as the anchor for the w2tooltip. (in w2grid.js searchOpen()) so it appears just below it.

I do want the advanced search of multiple fields, but only from the dialog choosing specific searches.

If I allow the text box to be displayed, with "Search All Fields," I get too many "false matches" due to the nature of the data.

I'm fine with the solution I found, and understand it could "break" in future versions of w2ui.

Thanks!

[vitmalina]

Alternatively, you can hide all search completely with show.toolbarSearch: true, and then add a toolbar button that will open advanced search

  columns: [...],
  toolbar: {
    items: [
      // span is needed for popup anchor
      { id: 'custom_search', type: 'button', text: '<span id="#grid_${grid.name}_search_all"></span>Search' }
    ],
    onClick(event) {
      if (event.detail.id == 'custom_search') {
         grid.searchOpen()
         ....
      }
    }
  }

I did not test it, but I think it could word