Wijmo 5 | FlexGrid Sorting

Sorting for Multiple column

by Joel Parks

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<div id= "theGrid"></div>

CSS

#theGrid{
	max-height:500px;
}

JavaScript

onload=function(){
   //create random data
	var getData = function (value) {
            var countries = 'India,Japan,UK,US,China'.split(','),
			products="Wijmo,Spread,AR".split(","),
            data = [];
            for (var i = 0; i < value; i++) {
                data.push({
                    id: i + 1,
                    country: countries[i % countries.length],
                    sales: Math.random() * 10000,
                    downloads: Math.random() * 200,
					product:products[i%products.length],
                    active: i%3==0
                });
            }
			return data;
	};
	var cvData=new wijmo.collections.CollectionView(getData(50),{
		groupDescriptions:['product']
	});
	var grid= new wijmo.grid.FlexGrid("#theGrid",{
		itemsSource:cvData,
		sortedColumn: function(s,e) {
			console.log(s.cells);
		}
	});
	grid.columns.getColumn("product").visible=false;
	grid.sortingColumn.addHandler(function(s,e){
		if(grid.columns[e.col].binding=="country"){	
			    e.cancel=true;	
				var collections= wijmo.collections,
				currentSort=grid.columns[e.col].currentSort=='-' ? false:true ,
				sortDesc1= new collections.SortDescription("product",currentSort ),
				sortDesc2=new collections.SortDescription("country",!currentSort);				
				cvData.sortDescriptions.clear();
			    cvData.sortDescriptions.push(sortDesc1,sortDesc2);
		}
	});
	/*grid.sortedColumn.addHandler(function(s,e) {
		if(e.panel.cellType === 2) {
			console.log(e);
			s.columns[e.col].header = `<span class="wj-glyph-up"></span>`
		}
	});*/
	
}