CODEWITHSUNDEEP
asp.net-mvc-4model-view-controllerjqgridinlineinline-editing
Justin CI
Justin CI

Reputation: 2741

Inline Jqgrid drop down binding issue

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

Upvotes: 1

Views: 554

Answers (1)

Jayaraj.K
Jayaraj.K

Reputation: 928

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.

Upvotes: 2

Related Questions