how to redesign the search and reset buttons provided by default data grid layout for searchbar

Actually,the data grid layout gives the default search and reset buttons in top right corner after the text fields. Can we replace that at bottom of that search bar.If yes, Can you please tell me how to do it.
2 answers

Hi Maneesha,

Customizing that lay-out may be tricky, because actually the buttons “Search” and “Reset” are rendered before all the searchfields. As you can see in the DOM-nodes that these search-controls are in a container before the search-inputs:

I would suggest you apply somewhat more advanced styling by playing around with options like

position: relative; top: 100px; float: left; margin-bottom: 100px;

Hopefully this helps!

Kind regards, Johan


Hello Maneesha,

There were few complicated requirements in our company where we had to develop custom search filtering ourselves.

But good thing is, we achieved this with what is available out of box.

This can be achieved with the help of NPE.

  1. There must be one Search NPE object, which holds the search filters
  2. There must be SearchResult. One Search object linked to multiple search results.
  3. You must create the Result objects when filtering is applied. Although, applying the filtering will be much more complicated which we achieved with java programming
  4. In this, we can have desired layout as we need.
  5. NOTE: if implemented wrongly, this could have serious performance impact.