title: jqGrid - Dragging a row to sort it screws up cell widths
body: <p><strong>My problem:</strong> When I drag a row in jqGrid, and it completes a custom reload function, the cells of the grid, previously all of varying widths set when the grid is defined, are resized to all be the same width. This happens in Webkit browsers but not in Firefox.</p>
  
  <p><strong>Code:</strong>
  I have dragging to sort enabled on a grid:</p>
  
  <pre><code>$mygrid.jqGrid(
      'sortableRows', {
          update: function(e, ui) {
              sort_grid(e, ui);
          }
      }
  );
  </code></pre>
  
  <p>As you can see I have a sorting function called on drag complete, <code>sort_grid</code>. Here it is:</p>
  
  <pre><code>function sort_grid(e, ui) {
      var current_grid = $(ui.item[0]).closest('table').attr('id');
      var $current_row, moved_id, next_id, next_priority;
      var $moved_row = $('#' + current_grid + ' tr');
      var cnt = 0;
  
      this_id = ui.item[0].id;
      $moved_row.each(function () {
          if ($(this).attr('id') == this_id) {
              $current_row = $moved_row.eq(cnt);
              moved_id = $current_row.attr("id");
              next_id = $current_row.next().attr("id");
              next_priority = $current_row.next().children("td:first").attr("title");
          }
          cnt++;
      });
  
      if ( typeof moved_id !== 'undefined' ) {
          if ( next_priority == 'undefined' ) {
              next_priority = '999';
          }
  
          $.ajax({
              url:my_url,
              type:"POST",
              data:"moved_id=" + moved_id + "&amp;next_id=" + next_id + "&amp;next_priority=" + next_priority,
              success: function(data) {
  
                  $('.grid').setGridParam({loadonce:false, datatype:'json'}); // force grid refresh from server
                  $('#' + current_grid).trigger("reloadGrid");
                  $('.grid').setGridParam({loadonce:true}); // reset to use local values
  
              }
          })
      }
  }
  </code></pre>
  
  <p>Once I hit that reload trigger <code>$('#' + current_grid).trigger("reloadGrid");</code> and reload finishes the grid now has incorrect widths on the cells in the grid (they go from being of various widths to all being the same width).</p>
  
  <p>When the grid was originally created it had widths defined in the normal jqGrid fashion:</p>
  
  <pre><code>colModel:[
      {name:'one', index:'one', sortable:true, width:45},
      {name:'two', index:'two', sortable:true, width:180},
  ]
  </code></pre>
  
  <p>but after the grid reload the widths are reset all be the same width (I assume this is the total width of the grid being evenly divided over the total number of cells in the row). So, do I need to explicitly set these widths again, perhaps with something like the following called after the grid reloads?</p>
  
  <pre><code>$('.grid').setGridParam({
      colModel:[
          {name:'one', index:'one', sortable:true, width:45},
          {name:'two', index:'two', sortable:true, width:180},
      ]
  });
  </code></pre>
  
  <hr>
  
  <p>I tried the above fix, redefining the colModels after reload and explicitly setting the widths, but it had no effect. Weirder, if I go into the browser console and set the widths with javascript it also has no effect. That's got me stumped.</p>
  
  <hr>
  
  <p>Unfortunately for me it looks like the jqGrid "Answer Man" (<a href="https://stackoverflow.com/users/315935/oleg">Oleg</a>) is not around... lol.</p>