Auto Merge

In DataViewsJS, you can merge the adjacent cells in a column holding the same value using the AutoMerge feature. This feature helps present the data in an understandable manner.

Use the following steps to enable AutoMerge in a column.

Sample Code

1. Set the allowCellMerging property to true in the dataView option. You also need to set this property to true in the column that you want to merge.

var columns = [ { id: 'country', caption: 'Country', dataField: 'Country', width: 180, allowCellMerging: true, }, { id: 'state', caption: 'State', dataField: 'State', width: 120, allowCellMerging: true, }, { id: 'city', caption: 'City', dataField: 'City', width: 120, allowCellMerging: true, }, { id: 'product', caption: 'Product', dataField: 'Product', width: 280, allowCellMerging: true, }, { id: 'detail', caption: 'Detail', dataField: 'Product_Detail', width: '*', }, ]; 

2. Initialize the code by calling the grid ID from the DIV tag.

var grouping = [ { field: 'country', header: { visible: false, }, footer: { visible: false, }, }, { field: 'state', header: { visible: false, }, footer: { visible: false, }, }, ]; var dataView = new GC.DataViews.DataView( document.getElementById('grid1'), data, columns, new GC.DataViews.GridLayout({ allowColumnReorder: false, allowCellMerging: true, selectionUnit: 'cell', grouping: grouping, }) ); 

Settings

The following settings are available for the AutoMerge feature:

Settings	Property	Description	Example
Mode	free	Merges the adjacent cells in a column if they have the same values.
Mode	restrict	Does not merge the adjacent cells in a column even if they have the same value.
Grouped Column	showIcon	Uses special grouping icon for the merged columns.
Grouped Column	onlyShowFirstRowValueInEachGroup	Shows the value of merged cell only in the first row.

See also

• allowColumnReorder
• allowCellMerging
• selectionUnit
• grouping