jqGrid - Setting select value in edit form

Question

I'm having a hard time trying to set the value of a select box in the edit form. For example I have my colModel set up like this.

colModel:[
         {name:'communication_id', key: true, index:'communication_id', width:30},            
         {name:'communication_type_id', index:'communication_type_id', width:30},
         {name:'communication_type_select',index:'communication_type_select',hidden:true,width:150, editable:true,edittype:'select',formatter:'select',editrules: {edithidden:true},
                                    formoptions:{label:'Communication Type'},
                                    editoptions:{dataUrl:"working_data_url",
                                        buildSelect: function(json){                                                
                                            var response = $.parseJSON(json);

                                            var s = '<select>';

                                            $.each(response.results,function(i,com){
                                                s += ('<option value="' + com.communication_type_id + '">'+ com.communication_type_desc + '</option>');
                                            });


                                            return s + "</select>";


                                        },dataInit: function(elem){
                                            alert(temp);
                                            //alert($('#com_table_communication_type_id').val());
                                            //$(elem).val($('#com_table_communication_type_id').val());
                                        }}},
         {name:'communication_send_dt', index:'communication_send_dt', width:150, sortable:true, sorttype: 'date',
                                    firstsortorder: 'desc', datefmt:'m/d/Y', editable:true},                                         

                            editoptions: {recreateForm:true},
                            rowNum:10,
                            width:'100%',
                            rowList:[10,20,30],
                            pager: '#com_pager',
                            sortname: 'communication_send_dt',
                            viewrecords: true,
                            sortorder: "desc",
                            loadonce:true,
                            caption: "Communication",
                            jsonReader: {
                                    repeatitems : false,
                                    root: "results"
                            },
                            height: '100%',
                            onSelectRow: function(communication_id){

                                var comtype = $(this).getRowData(communication_id);
                                var temp = comtype['communication_type_id'];

                            }
                    });

                    grid.jqGrid('navGrid','#com_pager',{edit:true,add:false,del:false});

When I click the edit button it loads the select options correctly, but I am having trouble with which one is selected. I want the value from communication_type_id to load into communication_type_select and I have tried different things to get that too happen. Basically if the id in communication_type_id is 2, then I want the select box in the edit form to be set to 2 as well when the edit form loads. Any help on this?

Update 1: I got it mostly working now by using beforeShowForm, but now I am running into a weird thing. When I have an alert in the beforeShowForm everything works, but when its commented out, it does not work! Thanks for your help @Oleg!

grid.jqGrid('navGrid','#com_pager',{edit:true,add:false,del:false},
                            {closeOnEscape:true, recreateForm:true,beforeShowForm: function(formid){  
                                //alert("com type id = "+comidvar + " response id = "+comrespvar + " com form type id = "+comfrmtypevar);
                                $("#communication_type_select", formid).attr("value",comidvar);
                                $("#form_response_select", formid).attr("value",comrespvar);
                                $("#form_type_select", formid).attr("value", comfrmtypevar);
                            }},

To your last modifications: The select from the `'communication_type_select'` will be build asynchronously from execution of `beforeShowForm`. So you should move at least the part of the code of `beforeShowForm` which uses `"#communication_type_select"` in the `buildSelect`. — Oleg, Jun 29 '12 at 15:32
You should always write small comment with @Oleg to my answer to inform you that you changed the text of your question. I found your current changes pure accidentally. — Oleg, Jun 29 '12 at 15:34

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

If I understand you correct you should use ajaxSelectOptions option of jqGrid with data property. You can define some additional option like communication_type_id in the data which value you can returns by the usage of $("#list").jqGrid('getGridParam', 'selrow') and then getCell to get the value from communication_type_id column. See the answer for details.

edited May 23 '17 at 12:20

Community

1
1

answered Jun 28 '12 at 21:34

Oleg

220,925
34
403
798

thanks for the help. I think that the timing of the actions is what is messing me up. If I put the $("#communication_type_select", formid).attr("value",comidvar); line in beforeShowForm in a setTimeout with a 1000 delay, it works again, but the edit window pops up and then changes to the correct select value after the timeout ends. Is there a better way to do it? I didn't really understand what I would need to move to buildSelect. – user1489283 Jun 29 '12 at 15:54
Also, is it possible to load the edit form, populate the selects, and set the correct select option under some loading... graphic or something? – user1489283 Jun 29 '12 at 16:18
@user1489283: Sorry, I am not sure that I understand you correctly. Do you want to display some graphics during loading of selects or you want display options in the select which contains graphics? – Oleg Jun 29 '12 at 17:04
Sorry to not be clear. I am using the editoptions and buildSelect to load a list into a select dropdown, then I want to set the selected choice in the dropdown to be whatever the row that is being edited is. It is all working up to a point, except that I have to use a setTimeout to set the select after it loads. I was wondering if there was a loading message that could be displayed while it loads. – user1489283 Jun 29 '12 at 18:25

jqGrid - Setting select value in edit form

1 Answers1