Inline Jqgrid drop down binding issue - asp.net-mvc-4

Question

I am trying to bind a list of data from my MVC action controller in an inline JqGrid. The sample JSON data is follows
{Id:"1",FirstName:"Joy",Gender:"Male"},
{Id:"2",FirstName:"George",Gender:"Male"},
{Id:"3",FirstName:"Tessa",Gender:"Female"}
I am trying to bind a drop down for Gender within the inline JqGrid. The sample data for the dropdown is as follows.
{Id:"17b4bf97-4ab0-49b1-ab01-072f4dbed696",Gender:"Male"},
{Id:"f206d222-0608-4b92-b9dd-0cac5c66121",Gender:"Female"}
I have configured the JqGrid as follows
$("#tbl-users").CreateGrid({
url: // MVC controller action url,
colNames: ['User ID', 'First Name', 'Gender',....],
colModel: [
{ name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
{name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
{name: 'Gender', index: 'Gender', searchoptions: { sopt: ['cn'] }, editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
dataUrl: // Url to get the list of Gender User from the MVC controller,
buildSelect:
function (response) {
//Code to build a drop down
}
}
},
});
On configuring as above I am not able to show the value of the Gender in my list. What am I missing? It would be helpful if I get guidance from anyone.
I am using JqGrid 4.5.1

Answer 1

With reference to the example add value attribute in Gender editoptions, The editoptions will look something like this.
$("#tbl-users").CreateGrid({
url: // MVC controller action url,
colNames: ['User ID', 'First Name', 'Gender',....],
colModel: [
{ name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
{name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
{name: 'Gender', index: 'Gender', searchoptions: { sopt: ['cn'] }, editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
value:"17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"
dataUrl: // Url to get the list of Gender User from the MVC controller,
buildSelect:
function (response) {
//Code to build a drop down
}
}
},
});
Change the return value for Gender as GUID.So the json will look something like this
{Id:"1",FirstName:"Joy",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"2",FirstName:"George",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"3",FirstName:"Tessa",Gender:"f206d222-0608-4b92-b9dd-0cac5c66121"}
FOR DYNAMIC LOADING
You can generate the value for value attribute in editoption dynamically by assigning the value in Viewbag on page load.
Assume the action for the page as Index in your controller
public ActionResult Index()
{
ViewBag.Genders = "17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"; // You can create your logic with C#
return this.View();
}
Assign ViewBag.Genders in value attribute of edit option as shown below
editoptions: { value:"#ViewBag.GenderTypes" }
I hope this idea will help you.