Wijmo 5 - Cell Merging

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20173.380/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.grid.min.js"></script>
<h1>Add Data dynamically</h1>
<input type="button" id="add" value="add data" />
<div id="theGrid" style="height:500px;"></div>

JavaScript

onload = function() {
    // create Random data
    function getData(strt,count){
    	var countries="US,UK,Japan,Italy,China,India".split(","),
        data=[];
        for(var i=strt;i<=count+strt;i++){
        	data.push({
            	id:i,
                country:countries[i%countries.length],
                sales:Math.random()*1000
            })
        }
        return data;
    }
    // create the FlexGrid (unbound)
    var flex = new wijmo.grid.FlexGrid('#theGrid');
   	flex.itemsSource= new wijmo.collections.CollectionView(getData(0,10));
    flex.allowAddNew=true;
    document.getElementById("add").onclick=function(e){
    	var data= getData(flex.rows.length-1,5);
        console.log(data)
        data.forEach(function(item){
        	
        	flex.collectionView.sourceCollection.push(item);
        });
        flex.collectionView.refresh();
    }
   
}