w2grid.columnGroups

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:

​x
 
let grid = new w2grid({
    name : 'grid',
    columnGroups : [
        { span: 1, text: '', main: true },
        { span: 2, text: 'Name' },
        { span: 1, text: '', main: true },
        { span: 2, text: 'Dates' }
    ],
    columns : [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ]
});
​

Or any time after the grid has been created:

xxxxxxxxxx
 
grid.columnGroups = [
    { span: 1, text: '', main: true },
    { span: 2, text: 'Name' },
    { span: 1, text: '', main: true },
    { span: 2, text: 'Dates' }
];
grid.refresh();
​

Column groups object is of following structure:

xxxxxxxxxx
 
columnGroups = {
    span : 1,     // number of columns to span
    text : '',    // caption of the group (can be a function)
    main : false  // indicates if column group header is merged with column header
}
​

w2grid.columnGroups

User Comments