title: jqgrid - how to edit a row?
body: <p>when i select a row in the jqgrid and press edit, i can not see any data in the modal box.</p>
  
  <p>and if i press submit button in the empty confirm box, my controller don't receive any data. what is wrong with my jqgrid?</p>
  
  <p>here is my view code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Employee&lt;/title&gt;
      &lt;script src="~/Scripts/jquery-2.1.4.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;script src="~/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/bootstrap.css" rel="stylesheet" /&gt;
  
      &lt;script src="~/Scripts/free-jqGrid/jquery.jqgrid.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/free-jqGrid/i18n/grid.locale-en.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/ui.jqgrid.css" rel="stylesheet" /&gt;
  
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              getAllEmployee();
          });
  
          function getAllEmployee() {
              $.ajax({
                  type: "get",
                  url: "/Employee/GetAllEmployee",
                  datatype: "JSON",
                  success: function (result) {
                      var html = '';
                      $.each(result, function (index, aEmployee) {
                          html += '&lt;tr&gt;&lt;td&gt;' + aEmployee.EmployeeId + '&lt;/td&gt;'
                          html += '&lt;td&gt;' + aEmployee.Name + '&lt;/td&gt;'
                          html += '&lt;td&gt;' + aEmployee.Address + '&lt;/td&gt;'
                          html += '&lt;td&gt;' + '&lt;a href="#" onclick="getAnEmployeeById(' + aEmployee.EmployeeId + ');" &gt;Edit&lt;/a&gt;' + ' | &lt;a href="#" onclick="deleteAnEmployee(' + aEmployee.EmployeeId + ');" &gt;Delete&lt;/a&gt;' + '&lt;/td&gt;&lt;/tr&gt;'
                      })
                      $('#divList tbody').html(html);
                  },
                  error: function (errorMessage) {
                      alert(errorMessage.responseText);
                  }
              });
          }
  
          function getAnEmployeeById(id) {
              $.ajax({
                  url: "/Employee/GetEmployeeById/" + id,
                  type: "GET",
                  datatype: "JSON",
                  success: function (result) {
                      $('#txtEmployeeId').val(result.EmployeeId);
                      $('#txtName').val(result.Name);
                      $('#txtAddress').val(result.Address);
                  },
                  error: function (errorMessage) {
                      alert(errorMessage.responseText);
                  }
              });
          }
  
          function editAnEmployee() {
              var aEmployee = {
                  EmployeeId: $('#txtEmployeeId').val(),
                  Name: $('#txtName').val(),
                  Address: $('#txtAddress').val()
              }
  
              $.ajax({
                  url: "/Employee/UpdateAnEmployee",
                  type: "post",
                  data: aEmployee,
                  dataType: "JSON",
  
                  success: function (result) {
                      getAllEmployee();
                  },
                  error: function (errorMessage) {
                      alert(errorMessage.responseText);
                  }
              });
          }
  
          function saveAnEmployee() {
              var aEmployee = {
                  Name: $('#txtName').val(),
                  Address: $('#txtAddress').val()
              }
              $.ajax({
                  url: "/Employee/AddAnEmployee",
                  type: "post",
                  data: aEmployee,
                  dataType: "JSON",
  
                  success: function (result) {
                      getAllEmployee();
                  },
                  error: function (errorMessage) {
                      alert(errorMessage.responseText);
                  }
              });
          }
  
          function deleteAnEmployee(id) {
  
              var confirmation = confirm('Delete ?');
  
              if (confirmation) {
                  $.ajax({
                      url: "/Employee/DeleteAnEmployee/" + id,
                      type: "post",
                      dataType: "JSON",
  
                      success: function (result) {
                          getAllEmployee();
                      },
                      error: function (errorMessage) {
                          alert(errorMessage.responseText);
                      }
                  });
              }
          }
  
  
          $(function () {
              jQuery("#tblGrid").jqGrid({
                  url: '/Employee/GetAllEmployee',
                  datatype: 'json',
                  mtype: 'POST',
                  ajaxGridOptions: { contentType: "application/json" },
  
                  colNames: ['EmployeeId', 'Name', 'Address'],
                  colModel: [
                      { name: 'EmployeeId', index: 'EmployeeId', width: 100, align: 'left', editable: true, edittype: 'text', editoptions: { readonly: 'true' } },
                      { name: 'Name', index: 'Name', width: 300, align: 'left', editable: true, edittype: 'text' },
                      { name: 'Address', index: 'Address', width: 300, align: 'left', editable: true, edittype: 'text' },
                  ],
  
                  //jsonReader: {
                  //    repeatitems: false,
                  //    root: function (obj) { return obj; },
                  //    page: function (obj) { return 1; },
                  //    total: function (obj) { return 1; },
                  //    records: function (obj) { return obj.length; }
                  //},
  
                  loadonce: true,
                  pager: jQuery('#divPager'),
                  rowNum: 5,
                  rowList: [5, 10, 20, 50],
                  sortname: 'EmployeeId',
                  sortorder: "asc",
                  viewrecords: true,
                  caption: 'Employee Information',
  
                  editurl: '/Employee/UpdateAnEmployee'
  
  
                  //edit : {
                  //addCaption: "Add Record",
                  //editCaption: "Edit Record",
                  //bSubmit: "Submit",
                  //bCancel: "Cancel",
                  //bClose: "Close",
                  //saveData: "Data has been changed! Save changes?",
                  //bYes : "Yes",
                  //bNo : "No",
                  //bExit: "Cancel"
                  //}
  
              }).navGrid(divPager, { edit: true, add: true, del: true, refresh: true, search: true },
              { },
              {  url: "/Employee/DeleteAnEmployee?id=5" },
              { },
              { },
              {  }
              );
          });
  
  
          //jQuery("#tblGrid").navGrid("#divPager", {},
          //{ url: "/Employee/DeleteAnEmployee" },
          //{ url: "/Employee/DeleteAnEmployee" },
          //{ url: "/Employee/DeleteAnEmployee" }
          //);
  
  
  
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div id="divEntry"&gt;
              &lt;form id="formStudent"&gt;
  
                  &lt;h4&gt;Enter An Employee&lt;/h4&gt;
  
                  &lt;table class="table-bordered"&gt;
                      &lt;tr&gt;
                          &lt;td colspan="2"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="txtEmployeeId"&gt;ID&lt;/label&gt;
                                  &lt;input type="text" id="txtEmployeeId" placeholder="Enter Employee Id" /&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
  
  
                      &lt;tr&gt;
                          &lt;td&gt;Employee Name&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="txtName" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Employee Address&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="txtAddress" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div id="divAction"&gt;
              &lt;input type="button" id="btnLoad" class="btn-primary btn-group-lg" value="Load" onclick="return getAllEmployee();" /&gt;
              &lt;input type="button" id="btnSave" class="btn-primary btn-group-lg" value="Save" onclick="return saveAnEmployee();" /&gt;
              &lt;input type="button" id="btnEdit" class="btn-primary btn-group-lg" value="Edit" onclick="return editAnEmployee();" /&gt;
              &lt;input type="button" id="btnDelete" class="btn-primary btn-group-lg" value="Delete" onclick="return deleteAnEmployee();" /&gt;
          &lt;/div&gt;
  
          &lt;div id="divList"&gt;
              &lt;table class="table table-bordered"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Employee Id&lt;/th&gt;
                          &lt;th&gt;Employee Name&lt;/th&gt;
                          &lt;th&gt;Employee Address&lt;/th&gt;
                          &lt;th&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody class="tbody"&gt;&lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;table id="tblGrid"&gt;&lt;/table&gt;
              &lt;div id="divPager"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i am also attaching my data retrieving code:</p>
  
  <pre><code>public class EmployeeDB
  {
      string connectionString = @"Data Source=.\SQLEXPRESS; initial catalog=TestDB; user id=sa; password=123456";
  
      public List&lt;Employee&gt; GetAllEmployee()
      {
          List&lt;Employee&gt; employees = new List&lt;Employee&gt;();
          using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
          {
              aSqlConnection.Open();
  
              string query = "select EmployeeId, Name, Address from Employee";
  
              SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
              SqlDataReader aSqlDataReader = aSqlCommand.ExecuteReader();
              while (aSqlDataReader.Read())
              {
                  Employee aEmployee = new Employee();
  
                  aEmployee.EmployeeId = Convert.ToInt32(aSqlDataReader["EmployeeId"]);
                  aEmployee.Name = Convert.ToString(aSqlDataReader["Name"]);
                  aEmployee.Address = Convert.ToString(aSqlDataReader["Address"]);
                  employees.Add(aEmployee);
              }
          }
          return employees;
      }
  
      public int AddEmployee(Employee aEmployee)
      {
          int status = 0;
          using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
          {
              aSqlConnection.Open();
  
              string query = "insert into Employee values ('" + aEmployee.Name + "','" + aEmployee.Address + "')";
  
              SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
              status = aSqlCommand.ExecuteNonQuery();
          }
  
          return status;
      }
  
      public int UpdateEmployee(Employee aEmployee)
      {
          int status = 0;
          using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
          {
              aSqlConnection.Open();
  
              string query = "Update Employee Set Name = '" + aEmployee.Name + "', Address = '" + aEmployee.Address + "' where EmployeeId='" + aEmployee.EmployeeId + "'";
  
              SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
              status = aSqlCommand.ExecuteNonQuery();
          }
  
          return status;
      }
  
      public int DeleteEmployee(int id)
      {
          int status = 0;
          using (SqlConnection aSqlConnection = new SqlConnection(connectionString))
          {
              aSqlConnection.Open();
  
              string query = "delete from employee where EmployeeId='" + id + "'";
  
              SqlCommand aSqlCommand = new SqlCommand(query, aSqlConnection);
              status = aSqlCommand.ExecuteNonQuery();
          }
  
          return status;
      }
  }
  </code></pre>