W2UI grid: Checked Checkboxes not saving;

Question

I introduced two buttons on the toolbar one 'CheckAll' and the other 'UncheckAll', they are to have effect on a particular column say 'Status' (with checkboxes) in the grid. I wrote two Javascript functions to do this.

function check_all(the_unchecked){
        for(i=0; i<the_unchecked.length; i++){
        the_unchecked[i].checked = true;
    }
}

function uncheck_all(the_checked){
    for(i=0; i<the_checked.length; i++){
        the_checked[i].checked = false;
    }

} The effected field:

{field: 'status', caption: 'Status', size: '50px', searchable: 'text', resizable: true, render: function (records) {
                    if (records.status === true) {
                        return   '<span style="background-color:#a3e9a4; width:100%;display:block;"> <input class="enable_check" type="checkbox" name="enable_check[]" value="true" checked="true"></span>';
                    } else {
                        return  '<span style="background-color:#f69988; width:100%;display:block;"> <input class="enable_check2" name="enable_check[]" value="false" type="checkbox"></span>';
                    }
                }, style: 'text-align:center'},

The problem is when I clicked on Save button the checked buttons are nor sent/saved to the database.

What I want is when CheckAll is clicked it checks all checkboxes in the column Status of the fetched rows, then 'Save' persist all the changes to the database.

score 2 · Accepted Answer · answered Oct 19 '14 at 06:06

I think the best way would be to attach checkAll and uncheckAll to the grid itself. Then it is easier to use it. I have also modified the render function to save status back to the grids records. So, this is how you can add:

{ field: 'status', caption: 'Status', size: '50px', 
    render: function (record) {
        return '<div style="text-align: center">'+
           '    <input type="checkbox" ' + (record.status ? 'checked' : '') + 
           '        onclick="var obj = w2ui[\''+ this.name + '\']; obj.get('+ record.recid +').status = this.checked;">'+
           '</div>';
    }
}

Then I have added these functions to the grid

checkAll: function () {
    this.set({ status: true });
},
uncheckAll: function () {
    this.set({ status: false }); 
},
getAllChecked: function () {
    return this.find({ status: true });
}

Which you can add when you define grid's columns. After that, you can call it this way:

w2ui[grid_name].checkAll();
// OR
w2ui[grid_name].uncheckAll();

However, you will need to get all records ids to submit it to the server, use getAllChecked for this. On the second thought, I do not think you need to define those functions, as they are so short. Just call them directly when you need them.

NOTE: you might consider using grid.show.selectColumn = true. See http://w2ui.com/web/docs/w2grid.show

W2UI grid: Checked Checkboxes not saving;

1 Answers1