title: Using jqGrid 4.4.0 Dependent select drop downs, have 2nd drop down load from dataUrl dynamically based upon other columns value
body: <p>In the grid I have a country drop down and a province/state drop down. When the user selects the Country drop down I need to get the list to load with the provinces/states for the currently selected country in its row.</p>
  
  <p>I get my lists from the server (using MVC 3, .Net) using a dataUrl. I have written code in the grid's column to define the dataInit editoption to change the dataUrl to contain my current country Id. However, it appears that the dataUrl is called before the dataInit event occurs.</p>
  
  <p>To further complicate this, I have created a base grid view which is re-used throughout our application. This is needed as we have 30-60 different grids within the application. So the user of each grid merely defines the columns, their types, edittypes, formats, etc. The base grid view merely generates the jqgrid on the fly (its written using RAZOR view engine within Vs.Net's MVC 3 frmaework).</p>
  
  <p>In my razor code (basegrid) for each column of select type which is defined to have a dependent column, I generate the code for the dataInit function to get that value and update the dataUrl for the column's definition.</p>
  
  <p>MY CONCLUSIONS:</p>
  
  <p>It appears that my province/state column's dataInit method is called AFTER the dataUrl is called (i.e. after I have called server to get the list). If this is the normal behaviour of dataInit, I need a different column event method. </p>
  
  <p>REQUIREMENTS:</p>
  
  <p>1) I can't use the standard grid 'BeforeEditCell' events since I may have multiple selects which may depend upon other columns. As well, the user of my basegrid will determine, at runtime, the dependency relationship. (The razor code iterates through each column and generates the grid syntax).</p>
  
  <p>2) I would like the dataUrl to be modified BEFORE the url is invoked for loading. I do not want to perform to load calls for the list</p>
  
  <p>3) I would like to avoid loading the lists into javascript array. So have to use dataUrl.</p>
  
  <p>Here is a snippet of what gets declared. I have removed the other columns as they follow simpler setup, but similar in script.</p>
  
  <pre><code>jQuery("#gridList").jqGrid({
      url: '/Home/HonourAwardGridData',
      datatype: "json",
      colNames: [
      'Country',
      'Province / State',
          ],
      colModel: [
  {
  name: 'Country',
  index: 'Country',
  width: 90,
  sortable: true,
  editable: true,
  editrules: {
          edithidden: false,
  required: false    },
          hidden: false,
                      edittype: 'select',
                      editoptions: {
                      dataEvents: [
                                   { type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
                                  ],
                      dataUrl: '/Common/GetCountryValues?pageId=HonourAward',
                      buildSelect: BuildLookupEntitySelect
                      },
  },
  {
  name: 'ProvinceState',
  index: 'ProvinceState',
  width: 90,
  sortable: true,
  editable: true,
  editrules: {
          edithidden: false,
  required: false    },
          hidden: false,
                      edittype: 'select',
                      editoptions: {
                      dataEvents: [
                                   { type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
                                  ],
                      dataUrl: '/Common/GetProvinceValues?pageId=HonourAward&amp;countryId={0}',
                          dataInit: function(elem) {
                                        var myGrid = $('#gridList');
                                        var selRowId = mygrid.jqGrid('getGridParam', 'selrow');
                                        var depColName = 'Country';
                                        var depColValue = mygrid.jqGrid('getCell', selRowId, depColName);
                                        var newDataUrl = '/Common/GetProvinceValues?pageId=HonourAward&amp;countryId={0}';
                                        newDataUrl = newDataUrl.replace("{0}", depColValue);
  
                                        $("#grid").jqGrid('setColProp', depColName, {dataUrl: newDataUrl}); 
                                    },
                      buildSelect: BuildLookupEntitySelect
                      },
  }
      ],
      rowNum: 200,
          cellEdit: true,
          cellSubmit: 'remote',
          cellurl: '/Home/EditHonourAwardGridData',
      multiselect: true,
      grouping: false,
      jsonReader: {
          root: "rows", //array containing actual data
          page: "page", //current page
          total: "total", //total pages for the query
          records: "records", //total number of records
          repeatitems: false,
          id: 'RecordId' //index of the column with the PK in it
      },
      toppager: true,
      shrinkToFit: false,
      rownumbers: false,
      autowidth: true,
      height: 'auto',
      autoencode: true,
      altRows : true,
      pager: '#gridPager',
      viewrecords: true,
      sortable: false, 
      afterEditCell: function (id, name, val, IRow, ICol) { 
              saveRow = IRow; 
              saveCol = ICol; 
          }
  });
  jQuery("#gridList").jqGrid('navGrid', '#gridPager', { search: false,
                                                        edit: true,
                                                        add: false,
                                                        del: false,
                                                        editfunc: function(id) { 
                                                              var row = jQuery("#gridList").jqGrid('getRowData', id);
                                                              var dialogTitle = 'Honours and Career Awards' + ' - ' + row['Name'];
                                                              LoadReportUpdateView('HonourAwardUpdate', dialogTitle, row.RecordId);
                                                        },
                                                        addfunc: function() { 
                                                              LoadReportAddView('HonourAwardAdd', 'Honours and Career Awards' + ' - Add New');
                                                        }
                                                      })
                            .navButtonAdd('#gridPager', {
                                caption: "Columns",
                                onClickButton: function () {
                                    ChooseColumns("#gridList", 'HonourAward', 'Select columns for Honours and Career Awards grid');
                                },
                                position: "last"
                            });
  });
  </code></pre>
  
  <p>Thank you in advance for any help, or direction that you can provide.</p>