title: How do you update a w2ui grid summary cell?
body: <p>I have a grid where I need to show the sum of all the numbers in one column.  The numbers are editable in the grid, and the sum needs to be updated as the numbers change (before a Save).  I am having multiple issues. The relevant code is shown below and <a href="http://jsfiddle.net/sman/pfq20gnu/10/" rel="nofollow noreferrer">here is a jsfiddle</a> if you'd like to poke around with a functioning program.  </p>
  
  <pre><code>$(function() {
      $('#grid').w2grid({
          name: 'grid',
          columns: [{
              field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center'}, {
              field: 'lname', caption: 'Last Name', size: '150px', sortable: true }, 
              {field: 'amount', caption: 'Amount', size: '100px', render: 'money', editable: { type: 'money' }}, 
          ], 
          records: [{
              recid: 1, fname: 'Jane',  amount: 1000.00}, {
              recid: 2, fname: 'Stuart', amount: 1000.00}, {
              recid: 3, fname: 'Jin', amount: 1000.00}, {
              recid: 's-1', fname: '', amount: 0, w2ui: {summary: true}}
          ]
      });
      w2ui.grid.on('change', function(event) {
          event.done(function () {updateTotal(); });
      });    
      w2ui.grid.on('refresh', function(event) { updateTotal(); });
      w2ui.grid.on('render', function(event) {updateTotal(); });
  });
  
  function updateTotal() {
      var total = 0.0;
      for (var i = 0; i &lt; w2ui.grid.records.length; i++) {
          if (typeof w2ui.grid.records[i].amount == "number") {
              total += w2ui.grid.records[i].amount;
          }
      }
      w2ui.grid.get('s-1').amount = total;
      w2ui.grid.refreshCell('s-1','amount');
      document.getElementById("gridtotal").innerHTML = '' + w2ui.grid.summary[0].amount  + '&lt;br&gt;w2ui.grid.records[0].amount = ' + w2ui.grid.records[0].amount;
  }
  </code></pre>
  
  <p>First issue -- updates to the summary row are not being displayed. I have onChange, onRefresh, and onRender handlers. They wrap a call to updateTotal(), which adds the 'amount' in every record and stores the result in the summary record's amount field. I call refreshCell after the amount has been changed. But none of the handlers are called when the initial display of the grid happens - so the summary record shows 0. What call should be made to update the summary amount when the grid is initially displayed?</p>
  
  <p>Second issue -- updateTotal() displays results in the wrong cell. Click the button to execute updateTotal(). The sum of 3000 is correct for the table in its initial state. You can see from the line that updates the innerHTML that the summary record ('s-1') gets updated with the correct value in its 'amount' field, and that we call refreshCell('s-1','amount'). But on the grid, the 'amount' cell for recid 1 gets updated to show 3000 (and note that it gets rendered left-justified rather than right-justified).   Why did this happen? What call should I make to update the 'amount' cell in the summary row?</p>
  
  <p>Third  issue -- as a user makes changes to the 'amount' cells (double-click to change the amount), the onChange event occurs which causes a new total to get calculated. But the changes made by the user are not available in the grid records. The changes are saved in a different location. So the newly calculated total does not correspond to the numbers the user sees on the grid. The new values are not available in the records (records[i].amount) until after updates are saved. But I need to access the amounts displayed in the grid before the changes are saved.  How do I  access the changed values?</p>