Wijmo 5 - Cell Merging

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20172.359/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20172.359/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20172.359/controls/wijmo.grid.min.js"></script>
<h1>Merging Cells</h1>

<p>
    This is a FlexGrid with some cells merged.
    By default, the FlexGrid merges cells that have the 
    same content.
    (It is possible to override this behavior by
    providing a custom mergeManager, but that was not
    done in this example.)</p>
    
<div id="theGrid"></div>

JavaScript

onload = function() {
    
    // create the FlexGrid (unbound)
    var flex = new wijmo.grid.FlexGrid('#theGrid');
    
    // give the grid two rows and 5 columns
    while (flex.rows.length < 2) {
        flex.rows.push(new wijmo.grid.Row());
    }
    while (flex.columns.length < 5) {
        flex.columns.push(new wijmo.grid.Column());
    }
    
    // enable merging
    flex.allowMerging = 'All';
    flex.columnHeaders.rows[0].allowMerging = true;
	flex.columns[0].allowMerging = true;
	flex.columns[2].allowMerging=true;
    

    // set the content (will cause merge)
    for (var row = 0; row <= 1; row++) {
    	flex.setCellData(row, 0, 'row span 2');
		flex.setCellData(row, 2, 'row span 3');
		
    }
    for (var col = 0; col <= 4; col++) {
    	flex.columnHeaders.setCellData(0, col, 'col span 4');
    }
}