In jquery jqgrid, Is there anyway to have dropdown delayed until chosen?

Question

I am using jqgrid and i have a filter row with dropdowns to allow people to choose from a list of items. I was thinking that it wastes a lot of cycles to load all of the dropdown given that people might not select any of these.

Is there anyway to defer the ajax call to get the dropdown until a person actually clicks on the arrow in the dropdown filter. I see that a few other grid libraries do this.

Answer 1

Check this out:

Markup:

<select id="ddl">
    <option value="-1">Select One</option>
</select>

jQuery:

$("body").delegate("#ddl", "focus",function(event){
    //ajax call here, and then append items
    $(this).append("<option value='1'>Option 1</option>");
    $(this).append("<option value='2'>Option 2</option>");
    $(this).append("<option value='3'>Option 3</option>");
    $(this).append("<option value='4'>Option 4</option>");
    $(this).append("<option value='5'>Option 5</option>");
});

jsFiddle: http://jsfiddle.net/9asfG/

Answer 2

I think you can do it in server side also, in the code you can add an if-statement to check inside the $_POST["_search"], if this is true, then loop inside $_POST, find if the dropdown-search condition been post, if no, echo something blank or whatever to stop the code, if yes then continuing loading data from DB.

PS.: My personal opinion, maybe it's not a good idea to "delay" the result, cause user might don't know he need to select the dropdown first, it's not a good design from user experience point of view.