Show/Hide Columns

There are a number of useful functions to work with columns. You can add, remove, show, hide, find columns with these methods. The grid below shows an example how to toggle columns.

$(function () { $('#grid').w2grid({ name: 'grid', show: { footer: true }, columns: [ { field: 'lname', caption: 'Last Name', size: '150px' }, { field: 'fname', caption: 'First Name', size: '150px' }, { field: 'email', caption: 'Email', size: '100%' }, { field: 'sdate', caption: 'Start Date', size: '90px' }, ], 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' }, { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' } ] }); });