title: Click an element in jqgrid and select the row it is in
body: <p>When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)? </p>
  
  <hr>
  
  <p>Solution:</p>
  
  <p>In the <code>gridComplete</code> method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's <code>setSelection</code> method on it, passing in the required row id as a parameter.</p>
  
  <pre><code>$('#mygrid').find('input[type=button]').each(function() {
                      $(this).click(function(){
                          var therowid = $(this).parents('tr:last').attr('id');
                          $('#mygrid').jqGrid('setSelection', therowid );
                      });
                  });
  </code></pre>
  
  <p>On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.</p>