Demo - Hide Grouped columns

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Hide Group Columns
  </h1>
	<p>
		When you group data in a CollectionView, the group shows same content for grouped columns. 
	</p>
	<p>
		This sample shows how you can hide the Grouped columns as groupDescriptions gets changed.It handles <b>collectionChanged </b> event for CollectionView <b>groupDescriptions</b> property and hide grouped column in FlexGrid by setting Column <b>visible</b> property to false.
		
	</p>
	<label for="theCombo">
		Group By:
	</label>
  <div id="theCombo"></div>
  <div id="theGrid"></div>

</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin: 6px 0;
}

.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    products = 'Cars,Phones,Bikes,Computers,Cups'.split(','),
    colors = 'Red,Green,Blue,Yellow'.split(','),
    data = [];
  for (var i = 0; i < 20; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      color: colors[i % colors.length],
      active: i % 3 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data
  });
  // get the collectionView
  var cv=theGrid.collectionView;
  // hide Grouped columns as groupDescriptions changed
  cv.groupDescriptions.collectionChanged.addHandler(function(s,e){
  var grps=theGrid.collectionView.groupDescriptions;
    grps.forEach(function(grpDesc){
    	theGrid.columns.forEach(function(col){
      	if(col.binding==grpDesc.propertyName){
        	col.visible=false;
        }else{
        	col.visible=true;
        }
      });
    });
  });

  // select the type of grouping you want
  new wijmo.input.ComboBox('#theCombo', {
    selectedIndexChanged: function(s, e) {
      var view = theGrid.collectionView;
      view.groupDescriptions.clear();
      if (s.selectedIndex > 0) {
        view.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription(s.text));
      }
    },
    itemsSource: '(none),country,product,color,active'.split(',')
  })
}