title: Get row data from JQgrid button
body: <p>Here is how I fill the JQgrid:</p>
  
  <pre><code>jQuery("#responseMessages").jqGrid(
                                     'addRowData',
                                     i+1,
                                     {
                                      distance:messages[i].distance,
                                      age:messages[i].age,
                                      message:messages[i].message,
                                      messageId:messages[i].messageId, 
                                      report:reportBtn
                                     }
                                    );
  </code></pre>
  
  <p>Now the reportBtn is actually HTML markup so it places a button in the last column, letting the user report a message, here's the markup for that:</p>
  
  <pre><code>var reportBtn = "&lt;input style='height:22px;width:100px;' type='button' value='Report' onclick=\"\" /&gt;";
  </code></pre>
  
  <p>When I click report, I want it to give me the messageId from the row that it is in (messageId is the hidden column).</p>
  
  <p>How would I do that?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <pre><code>function GetMessages()
          {
              $.ajax(
              {
                  type: "POST",
                  url: "&lt;%= Url.Action("GetMessages", "Home") %&gt;",
                  success: function (result) {
                      var messages = result;
                      if (messages.length == 0)
                      {
                          $('#noMessagesAlert').show();
                      }
                      else
                      {
                          $('#noMessagesAlert').hide();
                          createGrid(messages);
                      }
                  },
                  error: function (error) {
  
                  }
              });
          }
  
  function createGrid(messages)
          {
              var myGrid = 
                  jQuery("#responseMessages"),
                  reportBtn = "&lt;input style='height:22px;width:100px;' type='button' value='Report' /&gt;",
                  mydata = messages,
                  getColumnIndexByName = function(grid,columnName) {
                      var cm = grid.jqGrid('getGridParam','colModel');
                      for (var i=0,l=cm.length; i&lt;l; i++) {
                          if (cm[i].name===columnName) {
                              return i; // return the index
                          }
                      }
                      return -1;
              };
  
              myGrid.jqGrid({
                  data: mydata,
                  datatype: 'local',
                  height: 'auto',
                  colModel: [
                      { name:'distance', index:'distance', label:'Distance', width:100 },
                      { name:'age', index:'age', label:'Age', width:75 },
                      { name:'message', index:'message', label:'Message', width:500 },
                      { name:'messageId', index:'messageId', key:true, hidden:true },
                      { name:'report', index:'report', label: 'Report', width:100,
                          formatter:function() { return reportBtn; } }
                  ],
                  loadComplete: function() {
                      var i=getColumnIndexByName(myGrid,'report');
                      // nth-child need 1-based index so we use (i+1) below
                      $("tbody &gt; tr.jqgrow &gt; td:nth-child("+(i+1)+") &gt; input",myGrid[0]).click(function(e) {
                          var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow");
                          var x=window.confirm("Are you sure you want to report this message?")
                          if (x)
                          {
                              reportMessage(tr[0].id);
                          }
                          e.preventDefault();
                      });
                  },
                  rowNum:25, 
                  rowList:[10,25,50],
                  pager: '#pager'
              });
          }
  </code></pre>
  
  <p>So here's the path the code takes. <code>GetMessages</code> gets called from a button click, and then if it returns anything, <code>createGrid</code> gets called passing in the returned list of messages.</p>
  
  <p>This works perfect the first time I do it. Now, if I just go and click that same button again, the grid doesn't update it's data (which should be different, because different data is coming back from the server). It just stays the same.</p>
  
  <p>Why?</p>