jqGrid disable a dropdown loaded by dataUrl

I have the following problem:

Inside a jqGrid there is a dropdownlist with option dataUrl to fetch data from a server. If I click on form edit (or add) the dropdown is OK, but I need to disable it if the row is already existing. I saw that by using afterShowForm events, it works only when the dropdown is already populated (after the first time). The first time, it seems that afterShowForm is fired before the dropdown is populated by dataUrl.

How开发者_开发知识库 can I solve this issue?

---

It seems to me that the most simplest way to disable dropdown would be to use buildSelect event in the editoptions additionally to the the dataUrl. If the data returned by dataUrl has already correct form the buildSelect can just return the input parameter back, but one can additionally disable the

You should also use recreateForm:true for the form to be sure that all callback will be always called. The code schema can be about the following:

var needDisable=true;
$("#list").jqGrid({
    colModel:[
        {name:'myDropDown',editable: true,edittype:"select",
         editoptions:{dataUrl:'myDropDown.txt',
                      buildSelect: function(data) {
                          var field_id=this.id; // "myDropDown"
                          setTimeout(function(){
                              if (needDisable) {
                                  $('#tr_'+field_id).attr('disabled','disabled');
                              } else {
                                  $('#tr_'+field_id).removeAttr('disabled');
                              }
                          }, 100);
                          return data;
                      }
        },
        // ... other colModel columns
    ],
    // ... other jqGrid parameters
}).jqGrid('navGrid','#pager',{},
          { // Edit form parameters
              recreateForm:true,
              beforeShowForm:function(form){
                  needDisable=true;
              }
          },
          { // Add form parameters
              recreateForm:true,
              beforeShowForm:function(form){
                  needDisable=false;
              }
          });

---

I had to come up with a solution to this list issue also. When adding a row, I display a list of existing values and also have a text field for the user to add a new value if need be (my version of a combo box). When editing a row I want to display the value in a text field instead of a list and remove the 'add' field. Additionally, the value is not editable once the row exists.

My solution:

navigatorAddOptions and navigatorEditOptions use beforeInitData:beforeAdd and beforeInitData:beforeEdit respectively. beforeShowForm does not work. Both also use recreateForm:true.

before... functions:

function beforeAdd(formid) {
   $("#gridTable").jqGrid('setColProp','listfield',{edittype:'select',editoptions:{readonly:false,dataUrl:'url_to_list.action'}});
   $("#gridTable").jqGrid('setColProp','newvaluefield',{hidden:false});
};

function beforeEdit(formid) {
   $("#gridTable").jqGrid('setColProp','listfield',{edittype:'text',editoptions:{readonly:true}});
   $("#gridTable").jqGrid('setColProp','newvaluefield',{hidden:true});
};

---

// WORKS: HIDE toolbar drop select
//$( "#" + columnNames[i] ).hide();

---

If you have a column name with name is pid, I got it in this way

In edit

beforeShowForm:function(form)
    $("#tr_pid").find("input,button,textarea,select").attr("disabled",true);
}

In add

beforeShowForm:function(form){
    $("#tr_pid").find("input,button,textarea,select").attr("disabled",false);
}

---

For me the answers here did not work or were just too complicated.

In my case I wanted to wait for a particular dropdown to exist and have a selected value.( But you can use other criteria.... )

My dropdown was using a dataURL to load the items so it took sometime before it was available in the screen.

In case some one lands here from a google search on how to wait for controls to be loaded on the first time the Edit/Add form shows....

My solution is a combination of recursion and setTimeout in JavaScript:

    function WaitForDropDownToBeLoadedAndProcess() {

    var dropDownVal= $("#MyDropDown").val();

    if (!dropDownVal) {//if the value is undefined called this method recursively
        setTimeout(function() {//use setTimeout to avoid blocking

            WaitForDropDownToBeLoadedAndProcess();

        }, 150);

    } else {//if the dropdown has a value

        //do your logic here... like disabling the control or set value

    }       
}

I hooked it up to the grid like this:

afterShowForm:function(formid) { 

    WaitForDropDownToBeLoadedAndProcess();   
}