Demo - Popup Column Picker

by Manish Gupta

HTML

<link rel="stylesheet" href="https://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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<div class="container">
  <button class="btn-primary" id="export">
  Export
  </button>
  <div id="theGrid"></div>
  <div style="display:none">
    <div id="theColumnPicker" class="column-picker"></div>
  </div>

</div>

CSS

.wj-flexgrid {
  max-height: 300px;
  margin: 10px 0;
}
.column-picker {
  columns: 3;
  padding: 12px;
  margin-left: 12px;
  margin-top: 26px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.column-picker-icon {
  cursor: pointer;
  color: #FF8754;
  margin: 3px;
}
body {
  margin-bottom: 20px;
}

JavaScript

onload = function() {

  // generate some random data
  var data = [],
    countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
    products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'],
    colors = ['Black', 'White', 'Red', 'Green', 'Blue'],
    dt = new Date();
  for (var i = 0; i < 100; i++) {
    var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
      countryId = Math.floor(Math.random() * countries.length),
      productId = Math.floor(Math.random() * products.length),
      colorId = Math.floor(Math.random() * colors.length);
    var item = {
      id: i,
      start: date,
      end: date,
      country: countries[countryId],
      product: products[productId],
      color: colors[colorId],
      countryId: countryId,
      productId: productId,
      colorId: colorId,
      amount1: Math.random() * 10000 - 5000,
      amount2: Math.random() * 10000 - 5000,
      amount3: Math.random() * 10000 - 5000,
      amount4: Math.random() * 10000 - 5000,
      amount5: Math.random() * 10000 - 5000,
      discount: Math.random() / 4,
      active: i % 4 == 0
    };
    data.push(item);
  }

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data,
    formatItem: function(s, e) {
    	if (e.panel == s.topLeftCells) {
      	e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
      }
    }
  });

	// create the column picker
	var theColumnPicker = new wijmo.input.ListBox('#theColumnPicker', {
  	itemsSource: theGrid.columns,
    checkedMemberPath: 'visible',
    displayMemberPath: 'header',
    lostFocus: function () {
    	wijmo.hidePopup(theColumnPicker.hostElement);
		}
	});
  
  // show the column picker when the user clicks the top-left cell
  var ref = theGrid.hostElement.querySelector('.wj-topleft');
  ref.addEventListener('mousedown', function (e) {
  	if (wijmo.hasClass(e.target, 'column-picker-icon')) {
 ...