Developer's Guide
Working with Columns
Auto Merge
Version 1
Version 1

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: '*',
  },
];
  1. 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