title: Refresh multiselect dropdown dynamically in jqgrid edit
body: <p>I am trying to populate a multiselect dropdown dynamically in jqgrid edit. The jqgrid has two dropdowns namely, role and roletype. The roletype options should change as per the option selected in role. However, though the ajax call gets new values on role drop down change event, the roletype does not refresh. The code is as follows:</p>
  
  <pre><code>var selRoleVal;
  
  var mygrid = $("#MyGrid"),
           ...
     , getRoleTypes = function () {
          var roleTypeData;
  
          $.ajax({
              type: "POST",
              url: "Page/GetDefinitions",               
              data: "{'roleID': '" + selRoleVal + "'}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              async: false,
              success: function (json) {
                  roleTypeData = json;
              },
              error: function (json) {
                  alert("Failed ...");
              }
          });
          return roleTypeData;
  
      }
  
      , setRoleTypeValues = function (role) {
  
          mygrid.jqGrid('setColProp', 'RoleType', {
              editoptions: {
                  value: function (elem) {
                     var roleTypeData;
  
                      roleTypeData = getRoleType();
                      return roleTypeData;
                  }
                  , recreateForm: true
  
              }
  
          });
  
      };
  
  
  
  mygrid.jqGrid({
          ...,            
          colNames: ['ID', 'Role', 'Role Type'],
          colModel: [
                      { name: 'id', index: 'id', width: 20, editable: false,     editoptions: { readonly: true, size: 1 } },                        
                      {
                          name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                          searchoptions: {
                              value: RoleList
                          },
                          editoptions: {
                              value: RoleList,
                              dataInit: function (elem) {
                                  selRoleVal = $(elem).val();
                              },
                              dataEvents: [{
                                  type: 'change',
                                  fn: function (e) {
                                       selRoleVal = $(e.target).val();
                                      setRoleTypeValues($(e.target).val());
                                   }
                              }]
  
                          }
                      },
                      {
                          name: 'RoleType', index: 'RoleType', width: 100, sortable: true, editable: true, edittype: "select", 
                           editoptions: {
                               value: getRoleType
                                   ,
                              dataInit: function (elem) {
                                      $(elem).multiselect({
                                          minWidth: 80, 
                                          height: 200,
                                          selectedList: 10,
                                          checkAllText: "Check all",
                                          uncheckAllText: "Uncheck all",
                                          noneSelectedText: "Any",
                                          open: function () {
                                              var $menu = $(".ui-multiselect-menu:visible");
                                              $menu.width("auto");
                                              return;
                                          }
  
  
                                      })
  
                                      $(elem).multiselect('refresh');
  
                              },
                              multiple: true
                          }
                      }
  
          ],
          rowNum: 20,
          rowList: [20, 40, 60],
          ...
          editurl: ...
  
          ....
  
      }).jqGrid('navGrid', '#MyPager', {
          ....
          , edit: true
          , add: true
          , del: true
          , search: false
          , recreateForm: true 
      })
  </code></pre>
  
  <p>What should I include to refresh roletype dropdown ?</p>