title: jqGrid - how to dynamically load combo box in edit toolbar (ASP.NET MVC 2)
body: <p>Using the jqGrid i am trying to figure out how to dynamically load my category combo box below.</p>
  
  <p><img src="https://i.stack.imgur.com/9w4X1.png" alt="enter image description here"></p>
  
  <p>This article shows me how the data must be formed in one of three ways.   <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules</a>.  Option #1 or #2 would work just fine as i don't want to load this every time i click the edit button on the grid.  Or do i have too? </p>
  
  <p>My javascript:</p>
  
  <pre><code>$(document).ready(function () {
  $('#grid').jqGrid({
      colNames: ['TypeId', 'Type', 'CR Active', 'Category'],
      colModel: [
          { name: 'TYPE_ID', index: 'TYPE_ID', hidden: true, search: false,
            editable: true, editoptions: { readonly: true, size: 10 },
            formoptions: { rowpos: 1, label: "Type Id", elmprefix: "(*)"} },
          { name: 'TYPE', index: 'TYPE', sortable: true, hidden: false,
            editable: true, editoptions: { size: 25, maxlength: 30 },
            formoptions: { rowpos: 2, label: "Type", elmprefix: "(*)" },
            editrules: { required: true} },
          { name: 'CR_ACTIVE', index: 'CR_ACTIVE', align: 'right', sortable: true,
            hidden: false, editable: true, edittype: "checkbox",
            editoptions: { size: 25, value: "Yes:No", defaultValue: "Yes" },
            formoptions: { rowpos: 3, elmprefix: "&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"} },
          { name: 'description', index: 'description', editable: true,
            edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} },
            formoptions: { rowpos: 4, elmprefix: "&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"} }
      ],
      pager: jQuery('#pager'),
      sortname: 'TYPE',
      rowNum: 10,
      rowList: [10, 20, 50],
      sortorder: "asc",
      width: 600,
      height: 250,
      datatype: 'json',
      caption: 'Available Types',
      viewrecords: true,
      mtype: 'GET',
      jsonReader: {
          root: "rows",
          page: "page",
          total: "total",
          records: "records",
          repeatitems: false,
          userdata: "userdata",
          id: "TYPE_ID"
      },
      url: "/Type/GetData"
      }).navGrid('#pager', { view: false, del: true, add: true, edit: true },
         { height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true,
          bottominfo: "Fields marked with (*) are required", closeAfterEdit: true,
          url: "/Type/Edit" }, // default settings for edit
         { height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true,
           bottominfo: "Fields marked with (*) are required", closeAfterAdd: true,
           url: "/Type/Create" }, // default settings for add
         { reloadAfterSubmit: false, jqModal: false, closeOnEscape: true,
           url: "/Type/Delete" }, // delete instead that del:false we need this
         { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true,
           afterSubmit: function (response, postdata) {
               alert("testing");
           } }, // search options
         { height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
       );
  
  });
  </code></pre>
  
  <p>My Controller to be called somehow to load the categories:</p>
  
  <pre><code>public JsonResult GetCategories()
  {
      string test = "Will be a string contructed as needed";
  
      //have to return something if there is an issue
      return Json(test);
  }
  </code></pre>
  
  <p>As i understand it dataUrl="GetCategories" of the colmodel descriptions editoptions would basically call this json action every time the add/edit button is pressed.  I am hoping that somebody has an example of how to incorporate this so that it only occurs on page load.  </p>
  
  <p>Thanks in advance.</p>