I am using setColProp to dynamically load values into a select edittype.

I have the values successfully load whenever I call:

loadComplete: function() {
                $("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
            },

However it only works here, and only once. If I change the value of contract_list and try to update the jqgrid by calling

$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });

again from anywhere (from a button click, from afterSubmit, or even reloading table) it does nothing at all.

Is there something that I'm doing wrong?

edit: Here is a better explanation of what I'm trying to do.

I have a jqGrid table with the id #profile_table.

This is part of the colModel in the jqGrid code:

colModel:[
                {name:'contract_num',index:'contract_num', editable: true, hidden: false, width:30, edittype: "select", editrules: {required: true}},   
]

Initially the contract_num edit field in the edit/add forms has no values in its select box. I load initial values from a javascript variable called contract_list that is created before the table gets created. I load these values initially by using:

loadComplete: function() {
                $("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
            },

This works fine, however it is possible that the values of contract_list will change whenever a user changes something else on the page that this table is displayed on. So I am trying to dynamically update the options inside of the select box for the contract_num field inside of the edit/add forms for this table. I successfully change the values inside of contract_list, however I cannot get the actual select box to update to the new values.

I am trying to update it by calling:

$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });

and then reloading the grid whenever someone changes the values for contract_list, however the table is not being updated.

I am using setColProp to dynamically load values into a select edittype.

I have the values successfully load whenever I call:

loadComplete: function() {
                $("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
            },

However it only works here, and only once. If I change the value of contract_list and try to update the jqgrid by calling

$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });

again from anywhere (from a button click, from afterSubmit, or even reloading table) it does nothing at all.

Is there something that I'm doing wrong?

edit: Here is a better explanation of what I'm trying to do.

I have a jqGrid table with the id #profile_table.

This is part of the colModel in the jqGrid code:

colModel:[
                {name:'contract_num',index:'contract_num', editable: true, hidden: false, width:30, edittype: "select", editrules: {required: true}},   
]

Initially the contract_num edit field in the edit/add forms has no values in its select box. I load initial values from a javascript variable called contract_list that is created before the table gets created. I load these values initially by using:

loadComplete: function() {
                $("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });
            },

This works fine, however it is possible that the values of contract_list will change whenever a user changes something else on the page that this table is displayed on. So I am trying to dynamically update the options inside of the select box for the contract_num field inside of the edit/add forms for this table. I successfully change the values inside of contract_list, however I cannot get the actual select box to update to the new values.

I am trying to update it by calling:

$("#profile_table").setColProp('contract_num', { editoptions: { value: contract_list} });

and then reloading the grid whenever someone changes the values for contract_list, however the table is not being updated.

• javascript
• jquery
• jqgrid

• It's important that you describe the problem more detailed. How the editoptions.value will be used? For example if you have some lines in editing mode the selects will not apdated automatically, but the next row which will start editing will use new settings. If you use formatter: 'select' together with editoptions.value you have to reload grig to apply the changes in the grid body. Could you include more full code example? – Oleg Commented Apr 9, 2012 at 9:05
• I added more code and a better explanation of what I am trying to do, I hope you can understand my problem now, thanks – Sandoichi Commented Apr 9, 2012 at 22:19
• Sorry, but the updated part don't clear anything. You wrote "I cannot get the actual select box to update to the new values". What is "actual select box". The select exist only if one edits some cell or row (I still don't know which editing mode you use). Why you reload the grid after setColProp? Do you had at the moment some row in editing mode? If the answer is "no row" that you don't need to do any reloading. Why you placed setColProp inside of loadComplete? I have no idea who changes contract_list, when you do this and how you do this. Do you do this in some event handler? – Oleg Commented Apr 10, 2012 at 10:05
• I use the default editing form in jqgrid that pops up whenever someone clicks the "edit" or "add" button. The values inside of contract_list get populated whenever the page is loaded by retrieving values from a mysql database. Users of the website can change the values inside of the mysql database through a different part of the webpage, and if they change the values then contract_list gets updated with the new values, and the select box inside of the edit form needs to be updated with the new values. I tried updating it with setColProp but nothing happens whenever I call it. – Sandoichi Commented Apr 10, 2012 at 22:26
• Now I think I understand your problem and wrote my answer. – Oleg Commented Apr 10, 2012 at 23:00

1 Answer 1

I think your main problem will be solved if you would use recreateForm: true options of the form editing (see here an example of the usage). I remend you to set the setting as the default before you call navGrid (see here the corresponding code).

Moreover from the information which you wrote in ments I think that you should better use dataUrl instead of value of the editoptions. So jqGrid can loads the list of the values directly from the server during creating of the edit form. Sometimes the usage of buildSelect is useful. It help you to provide the data from the server in for example JSON format and construct the <select><option value="...">...</option>...</select> HTML fragment based on the server data inside of buildSelect. Additionally it could be required to set ajaxSelectOptions: { cache: false } jqGrid option (see here or here) or to force re-validation of the previous server response on the dataUrl with respect of HTTP header "Cache-Control: private, max-age=0" (see here and here)