Question

Using the jqGrid i am trying to figure out how to dynamically load my category combo box below.

This article shows me how the data must be formed in one of three ways. http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules. 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?

My javascript:

$(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: "    "} },
        { name: 'description', index: 'description', editable: true,
          edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} },
          formoptions: { rowpos: 4, elmprefix: "    "} }
    ],
    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*/
     );

});

My Controller to be called somehow to load the categories:

public JsonResult GetCategories()
{
    string test = "Will be a string contructed as needed";

    //have to return something if there is an issue
    return Json(test);
}

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.

Thanks in advance.

Answer 1

Look at the “UPDATED” part of my old answer. It seems to me that it describes what you need. You should return JSON results from the action GetCategories() and convert the JSON input to the corresponding <select> HTML fragment inside your custom buildSelect function. Because you use editoptions in the form editoptions: { value: { 1: 'One', 2: 'Two'} } instead of editoptions: { value: { One: 'One', Two: 'Two'} }, you should modify a little the code of the action and the buildSelect function from the answer.

One more remark. Because you use ‘Category’ column options in the form edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} } you want probably to use Category ids (1 and 2) in the JSON data and display for the user the values ‘One’ and ‘Two’. In the case you should add additional option formatter:'select' (see details in the documentation here).