CODEWITHSUNDEEP
w2ui
sman
sman

Reputation: 119

How do you update a w2ui grid summary cell?

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 here is a jsfiddle if you'd like to poke around with a functioning program. 

$(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 < 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  + '<br>w2ui.grid.records[0].amount = ' + w2ui.grid.records[0].amount;
}

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?

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?

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?

Upvotes: 0

Views: 2944

Answers (1)

Mike Scotty
Mike Scotty

Reputation: 10782

To modify an existing record, you need to use the set method - with get you do not get a reference, but a copy!

 w2ui.grid.set('s-1', {amount: total});

About your first issue: You are assigning a render callback after the grid is already rendered. You will need to assign the callback in the constructor:

  $('#grid').w2grid({
      onRender: ....
  });

Your second issue should no longer be an issue when you use set instead of get.

About your third issue: until you save the changes, the changes are stored in record.w2ui.changes - so either call grid.save() or get the amount from the changes, not from the original record.

Updated fiddle:

http://jsfiddle.net/pfq20gnu/14/

Upvotes: 0

Related Questions