Two Grids

Below is a quick example how to work with multiple grids. The example demonstrates how to catch events from one grid and move a record from one grid to another.
$(function () { $('#grid1').w2grid({ name: 'grid1', header: 'Available', show: { header: true }, columns: [ { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' }, { field: 'lname', caption: 'Last Name', size: '30%', sortable: true }, { field: 'fname', caption: 'First Name', size: '30%', sortable: true }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' } ], records: [ { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' } ], onClick: function (event) { var grid = this; // need timer for nicer visual effect that record was selected setTimeout(function () { w2ui['grid2'].add( $.extend({}, grid.get(event.recid), { selected : false }) ); grid.selectNone(); grid.remove(event.recid); }, 150); } }); $('#grid2').w2grid({ name: 'grid2', header: 'Selected', show: { header: true }, columns: [ { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' }, { field: 'lname', caption: 'Last Name', size: '30%', sortable: true }, { field: 'fname', caption: 'First Name', size: '30%', sortable: true }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' } ], onClick: function (event) { var grid = this; // need timer for nicer visual effect that record was selected setTimeout(function () { w2ui['grid1'].add( $.extend({}, grid.get(event.recid), { selected : false }) ); grid.selectNone(); grid.remove(event.recid); }, 150); } }); });