Array of column group objects.
Array, default = []
You can use this property to organize columns in groups. If you change .columnGroups property during run-time, you will need to call .refresh() method to refresh the grid.
Column groups can be defined during object creation: $('#grid').w2grid({ name : 'grid', columnGroups : [ { span: 1, caption: '', master: true }, { span: 2, caption: 'Name' }, { span: 1, caption: '', master: true }, { span: 2, caption: 'Dates' } ], columns : [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'lname', caption: 'Last Name', size: '30%' }, { field: 'fname', caption: 'First Name', size: '30%' }, { field: 'email', caption: 'Email', size: '40%' }, { field: 'sdate', caption: 'Start Date', size: '120px' }, { field: 'sdate', caption: 'End Date', size: '120px' } ] }); Or any time after the grid has been created: w2ui['layout'].columnGroups = [ { span: 1, caption: '', master: true }, { span: 2, caption: 'Name' }, { span: 1, caption: '', master: true }, { span: 2, caption: 'Dates' } ]; w2ui['layout'].refresh(); Column groups object is of following structure: columnGroups = { span : 1, // number of columns to span caption : '', // caption of the group master : false // indicates if column group header is merged with column header }