Demo - Popup Column Picker

by Joel Parks

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>
<div class="container">

  <h1>
    Popup Column Picker</h1>
  <p>
    You can easily implement a column-picker UI using the
    grid's <b>columns</b> property, a <b>ListBox</b> control,
    and Wijmo's <b>showPopup</b> and <b>hidePopup</b>
    methods.</p>
  <p>
    For example, the grid below starts with an auto-generated
    set of columns. Click the gear icon at the top-left cell to
    show a <b>ListBox</b> where you can select the columns
    you want to display.</p>
  <div id="theGrid"></div>
  <div>
    <div id="theColumnPicker" class="column-picker"></div>
  </div>
  <button id="btnSource" class="btn btn-default">
    Change Item Source
  </button>
</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 = [], secondData = [],
    countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
    products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'],
    colors = ['Black', 'White', 'Red', 'Green', 'Blue'],
    dt = new Date();
    
  // The initial data that is loaded in the grid
  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);
  }
  
  // The secondary data that replaces the initial data
  for (var j = 0; j < 100; j++) {
    var sDate = new Date(dt.getFullYear(), j % 12, 25, j % 24, j % 60, j % 60),
      sCountryId = Math.floor(Math.random() * countries.length),
      sProductId = Math.floor(Math.random() * products.length),
      sColorId = Math.floor(Math.random() * colors.length);
    var sItem = {
      FieldA: j,
      FieldB: sDate,
      FieldC: sDate,
      FieldD: countries[sCountryId],
      FieldF: products[sProductId],
      FieldG: colors[sColorId],
      FieldH: sCountryId,
      FieldI: sProductId,
    };
    secondData.push(sItem);
  }

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data,
    formatItem: function(s, e) {
    	if...