JQGrid DataUrl usage with ASP.net (MVC 2.0) - jqgrid

Question

I want to display a combobox with add/edit dialog on Jqgrid. I could do it with hardcoded values. But now I want to populate data from database (controller action). Can anyone help me writting the controller code for DataUrl. (Does it need Json formatted string of Value & Text?). My Grid definition is as below.
My other url actions are working fine.
jQuery("#myGrid").jqGrid({
pager: jQuery('#myGridPager'),
sortname: 'Name',
rowNum: 10,
rowList: [10, 20, 50],
sortorder: "asc",
height: "auto",
autowidth: true,
colNames: ['Id', 'Name', 'Dept', 'Status', 'ParentNodeName'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true, key : true },
{ name: 'Name', index: 'Name', width: 200, editable: true, edittype: "text", editrules: { required: true} },
{ name: 'Dept', index: 'Dept', width: 90, editable: true, editrules: { required: true} },
{ name: 'Status', index: 'Status', width: 25, editable: true, edittype: "select", editoptions: { value: "A:Active;I:Inactive"} },
{ name: 'ParentNodeName',
index: 'ParentNodeName',
editable: true,
edittype: "select",
editoptions: { dataUrl: "/MyEntity/GetMyEntitys" }
},
],
datatype: 'json',
viewrecords: true,
mtype: 'GET',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
url: "/MyEntity/GetMyEntitysData",
multiselect: false,
editurl: "/MyEntity/EditMyEntity?__SESSIONKEY=<%=Model.SessionKey %>",
caption: "Data Entry"
})
.navGrid('#myGridPager', { view: true, del: true, add: true, edit: true },
{ height: 150, reloadAfterSubmit: false, modal: true }, // default settings for edit
{ height: 150, reloadAfterSubmit: true, modal: true, url: "/MyEntity/AddMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // settings for add
{ height: "auto", reloadAfterSubmit: false, modal: true, url: "/MyEntity/DeleteMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // delete
{ closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{} /* view parameters*/
);

Answer 1

Call controller code in dataUrl using edit options as below:
.aspx/js code:
editoptions: { dataUrl: "/YourControllerName/TheFunction" }
The controller code here:
public string TheFunction()
{
return ConstructSelect(Model.YourList);
}
public string ConstructSelect(SelectList collection)
{
string result = "<select>";
foreach (var item in collection)
{
result = result + "<option value = '" + item.Value + "'>" + item.Text + "</option>";
}
result = result + "</select>";
return result;
}

Answer 2

jqGrid wait for HTML code fragment (a valid HTML <select> element with the desired <options>: <select><option value='1'>One</option>…</select>) as the data returned from the dataUrl: "/MyEntity/GetMyEntitys". Because you return the data in JSON format you have to convert the data returned from the server with respect of the editoptions buildSelect. You can see the corresponding code example in my old answer.
One more small remark. Look at the jqGrid documentation and verify which parameters which you use are default. For example multiselect: false is default parameter. If you remove the default parameters from the grid definition the code wil be easier to read and it will work a litle bit quickly. In more complex parameters like jsonReader you could include only the properties which you want to change. For example you can use jsonReader in the form jsonReader : { repeatitems: true} because repeatitems is the only property of jsonReader which you want to change from the default settings. In the same way you can reduce { view: true, del: true, add: true, edit: true } to { view: true }.