0

What's the best way to dynamically populate dropdown options in jqgrid advanced searching?

1) The first way: use "dataUrl" option of "searchoptions"

Disadvantage: when user add new criteria, and choose the attribute, dataUrl was posted to the server, when user add the same criteria again, dataUrl was posted to the server again, and with twice. very strange.

enter image description here

Advantage: the values user selected previously was there and not cleared.

2) The second way: use "dataInit" option of "searchoptions"

Disadvantage: the values user selected previously was cleared when adding new criteria(can not accepted, because it is not user-friendly, please refer url: the selected value was cleared in dropdown after add new criteria in jqgrid advanced searching)

Advantage: data was loaded into page when the page refreshed and only once.

3) the third way, use "value" option of "searchoptions"

but it's not dynamically, just hard-coded in page.

Could any one share the best practice about the issues. thanks.

Community
  • 1
  • 1
Guanguan
  • 47
  • 2
  • 9

1 Answers1

0

I start with the second option. I suppose that you use dataInit in the wrong way. The goal of dataInit to initialize the control, like convert <select> to select2 or set jQuery UI Autocomplete or jQuery UI Datepicker on text input element. One should not fill the control with values. The select control is already created and filled before calling of dataInit.

If one use the first option, one can set HTTP cache header to prevent multiple request to dataUrl.

About the last option: one can set searchoptions.value dynamically inside of beforeProcessing for example. See the answer, this one and this one.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks, I've tried beforeProcessing function, it works fine. But the only problem is that beforeProcessing will be invoked every time when data is loaded, and thus searchoptions.value will also be set many times. I hope that searchoptions.value is only be set once when the page refresh.@Oleg – Guanguan Nov 19 '14 at 08:34
  • because the data used for populating the searchoptions has been loaded into request when the page opens.@Oleg – Guanguan Nov 19 '14 at 08:40
  • @Guanguan: You are welcome! It is not important that you set string value `searchoptions.value` multiple times. It's more important that no additional round trip to the server will be done and no waiting for the user during working with Advanced Searching Dialog. You can still cache the data for `searchoptions.value` *on the server side* and don't do any additional request to the database server to get the data every time. – Oleg Nov 19 '14 at 08:42
  • correct, i've cached the dictionary data which used for populating options in the cache of server. sorry for my stubbornness， i still want to find a way to just set the options just only once. i am trying to set the options when the initialization of jqgrid finished.@Oleg – Guanguan Nov 19 '14 at 08:54
  • is there any best practice in jqgrid to know when jqgrid finishs initializing? in my Advanced Searching Dialog, there are lot of drop down list, i am worried that set searchoptions.value with lots of times will become the bottleneck, looking forward to your opinions, thanks.@Oleg – Guanguan Nov 19 '14 at 09:02
  • @Guanguan: Sorry, but I don't understand the requirement, because I don't see any improvement for user for traffic reduction and so on. In any way I can suggest at least two ways of the implementation. Do you extended the server request with the `searchoptions.value`? If you can detect the first request from the second one you can place `searchoptions.value` only in the first request. The code inside of `beforeProcessing` can just test whether the `searchoptions.value` data exist in the server response or not. It's the first implementation. – Oleg Nov 19 '14 at 09:05
  • @Guanguan: The second way is even more simple. You can create grid with empty `searchoptions.value`. Directly after creating of the grid *you makes simple Ajax* request using `$.ajax` with `url` the same as for `dataUrl`. Inside of `success` callback of `$.ajax` you set `searchoptions.value` for the corresponding property (using the same `setColProp` method). In the way you makes only one request to the server directly at the beginning. – Oleg Nov 19 '14 at 09:09
  • @Guanguan: I don't like words "best practice". In any way it's nothing more as tips what to do in standard situation. It's better don't be dogmatic and don't always follow any rule. Just be creative and decide yourself what is the best way in every specific situation. I recommend you to analyse Profiler from Developer Tools of Internet Explorer/Chrome and so on to detect **the bottleneck** in the solution. *It have sense to invest the time in improvement near to the bottleneck and to improve the user experience*. All other improvements will just spend your time. – Oleg Nov 19 '14 at 09:16