Search code examples
jqgridfree-jqgrid

jqgrid dynamically change "dropdown column select" in search modal


I need to be able to dynamically modify the content of the dropdown "select.selectLabel" in the which are created inside the "div.searchFilter" > "td.columns". Which I need is to add or remove certain search columns when the user selects some external options.

I know these selects are based on the colModel, and they are all recreated every time the user add a new search rule. So it's difficult to alter them via dataInit() function, because my changes are lost everytime new rule is added. Even I find the element like...

dataInit: function(elem) { $(elem).closest("td.data").siblings(".columns").find("select.selectLabel"); }

then removing specific <option> and adding new ones, it seems to take no effect. I wonder if there is some way to "tell" the searchpanel the new ColModel, but I don't want to alter the grid, just ONLY the columns for search modal.

Thanks (version freejqgrid 4.13)

EDIT 1: To be clear (Oleg's comment)... I am using datatype=ajax (server data).

I have a regular colModel, but I want to modify the search panel dropdowns (combo-boxes) to add/remove some fields, NOT altering the grid colmodel. I mean, add/remove some <option> (both value and label), and add some new ones with new "pseudo-fields" which are not in the former colModel.

I tried the searchoptions.dataInit() function to get every new rule (so I can reach the corresponding <select class="selectLabel">), but found this function not easy to use for my needs.

Now I'm trying the searchoptions.afterRedraw() but I'm not sure if this will help me.

EDIT 2: Supose I have this

colModel: [
    {name:"country", label:"Country", search:true},
    {name:"city", label:"City", search:true},
    {name:"zip", label:"Zip Code", search:true}
]

When user opens the search modal, he will add a new rule and select the field from the dropbox which has...

<select class="selectLabel">
    <option value="country">Country</option>
    <option value="city">City</option>
    <option value="zip">Zip Code</option>
</select>

Then, the user clicks an external button, which fires an event that will MODIFY any column dropbox (present or future), which should be...

<select class="selectLabel">
    <option value="country">Country</option>
    <option value="city">City</option>
    <option value="zip">Zip Code</option>
    <option value="phone1">Phone 1</option> //dynamically added
    <option value="phone2">Phone 2</option> //dynamically added
    <option value="phone3">Phone 3</option> //dynamically added
    //(and so on...)
</select>

These new pseudo-fields (phone1, phone2 ...) are not present in the colModel, since they are created onthefly by some external code.


Solution

  • You don't posted the demo, which I could modify. Because of that I describe only what you can do. Searching Dialog of jqGrid contains columns parameter. The Searching Dialog contains the information based on the option if it exist. It the option isn't exist then the copy of colModel will be used. Thus you are able to fill columns dynamically with any information which you want and Searching dialog will contain it. Look at the old answer or in the demo for code examples, which uses columns parameter.