1

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

enter image description here

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
Billy Logan
  • 2,833
  • 16
  • 43
  • 49

1 Answers1

2

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).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I have tried to implement your suggestion but when the buildSelect function is called i don't get anything back data wise. Data is always equal to 0. My action is being called and i am providing a simple string "1: 'One', 2: 'Two'" with return Json(simplestring, JsonRequestBehavior.AllowGet). The buildSelect then gets called but the data param always equals zero. Any reason why? – Billy Logan Feb 07 '11 at 16:08
  • @Billy Logan: I would recommend you return Json(resultList, JsonRequestBehavior.AllowGet), where resultList has type List and MySel class has int Id and String Str properties. – Oleg Feb 07 '11 at 16:47
  • Oleg, I set this up as you suggested. However, returning a List defined and populated like above to the BuildSelection function throws a javascript error in both the jQuery.js file and the jQuery.jqGrid.js file. – Billy Logan Feb 07 '11 at 19:20
  • On a different note i was able to get the combo to load using similar logic that "Dolphy" used from the link of your original response. Only issue i haven't figured out with that is the double quote at the end of my last option item that displays in the combo. script looks like this: var Categories = $.ajax({ type: "GET", url: "/Type/GetCategories", dataType: "json", async: false, success: function (data) { }}).responseText; Then under the colmodel editoptions: { Categories } – Billy Logan Feb 07 '11 at 19:24
  • Oleg, Using the "Dolphy" example from the link you provided along with "Hogan's" fix to resolve the double quotes on the last value of the combo i was able to get this working. I would still like to see the buildSelect function working if you ever have time, but your help has led me to my answer. Thank you! – Billy Logan Feb 07 '11 at 20:54
  • @Billy Logan: I was searching just now for the code of the MVC example which I used as I wrote the previous answer. I could not find it till now, but I wanted to modify some another my MVC project which used jqGrid to reproduce the problem. Could you summarize what it work now in your project and what not work. I understand you so that you can create Action which gives back List and you can convert the server response to ` – Oleg Feb 07 '11 at 21:07
  • with the buildSelect example the json response from the server is not coming back to the function when i try and pass a list object like the one you provided above. Before when i was just trying to pass a string like "1: One; 2: Two" it would get to the function but the data value was always equal to zero. The function hasn't even made it to the part where you build the option list for the drop down at that point because nothing comes back. Thanks. I hoped i answered your question correctly? – Billy Logan Feb 07 '11 at 22:17