Any way to load data after user clicks a search button on the tool bar

[nzxgq0]

Hello,

I read the examples but found none to resolve this case:
when the page is loaded the first time, the grid just shows the empty table defined by the colModel.
When user clicks a search button on the toolbar, it starts to make the ajax call to load the dataModel and then fresh the grid.

Because we have millions of records in the DB (looks we have to apply remote filtering, paging and sorting rather than local) and it will be reasonable to show the grid after user fires the command.

Thanks in advance.

[paramvir]

refreshDataAndView() method is used to load or reload the data ( local or remote ) in the grid. When data location is remote, then grid automatically sends filter/ sorting/paging parameters along with remote request initiated by refreshDataAndView.

filter() method can also be used to reload data in case of remote filtering, when you want to send custom filter parameters. Example: https://paramquery.com/pro/demos/filter

So in listener of search button on toolbar, you can call either refreshDataAndView or filter method.

[nzxgq0]

refreshDataAndView() method is used to load or reload the data ( local or remote ) in the grid. When data location is remote, then grid automatically sends filter/ sorting/paging parameters along with remote request initiated by refreshDataAndView.

filter() method can also be used to reload data in case of remote filtering, when you want to send custom filter parameters. Example: https://paramquery.com/pro/demos/filter

So in listener of search button on toolbar, you can call either refreshDataAndView or filter method.

I know these. Thanks for the reply.
However what I want is that the grid doesn't have itself populated with data until user clicks the button.
Currently, all the examples have the grid populated with data when the page loads for the first time.

[paramvir]

However what I want is that the grid doesn't have itself populated with data until user clicks the button.

Set initial dataModel.location to "local" and don't assign any data to grid. When button is clicked, set dataModel.location to "remote" and call refreshDataAndView()

[nzxgq0]

However what I want is that the grid doesn't have itself populated with data until user clicks the button.

Set initial dataModel.location to "local" and don't assign any data to grid. When button is clicked, set dataModel.location to "remote" and call refreshDataAndView()

Hello, this approach does work. However it has another issue that the widths of the columns don't refresh but remain the same. Any idea? Thanks.

[paramvir]

refreshDataAndView doesn't change width of columns.

Please use flex, refreshCM methods or Columns API to alter width of the columns.

https://paramquery.com/pro/api#method-flex

https://paramquery.com/pro/api#method-Columns