MergeCallback
When data
changes, the grid generates merge information again, but the user can update the merge information directly based on external values.
Below is an example of selecting the area you want to merge and merging it.
Select the area you want to merge by dragging and click the Merge
button to merge it.
function btnMerge() {
const selection = gridView.getSelection();
const startItem = selection.startItem;
const endItem = selection.endItem;
if (startItem === endItem) {
return;
}
mergeCnt++;
const columnName = selection.startColumn;
if (!mergeInfo[columnName]) {
mergeInfo[columnName] = {};
}
for (let i = startItem; i <= endItem; i++) {
const dataRowId = gridView.getDataSource().getDataRowId(i);
mergeInfo[columnName][dataRowId] = mergeCnt;
}
const mergeCallback = (grid, column, dataRow, value) => {
const dataRowId = grid.getDataSource().getDataRowId(dataRow);
return mergeInfo[column.name] && mergeInfo[column.name][dataRowId];
};
gridView.columnByName(gridView.getCurrent().column).mergeCallback = mergeCallback;
gridView.columnByName(gridView.getCurrent().column).breakMergeOnEmpty = true;
}