Demo - FlexGrid Column Picker

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.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container-fluid">

  <h1>
    FlexGrid Column Picker
  </h1>

  <div id="theGrid"></div>
  <div style="display:none">
    <div id="theColumnPicker" class="column-picker"></div>
  </div>

  <div class="form-group">
  <label class="control-label">Column Picker Drop Indicator</label>
  <div class="form-control">
  <div class="radio-inline">
    <label>
      <input type="radio" name="dropIndicator" id="horizDropIndicator" value="horiz" checked>
     Horizontal line
    </label>
  </div>
  <div class="radio-inline">
    <label>
      <input type="radio" name="dropIndicator" id="vertDropIndicator" value="vert">
      Vertical line
    </label>
  </div>
  </div>
  </div>

  <p>
    You can use the grid's <b>columnLayout</b> property to allow users
    to save and restore column layouts. Click the buttons below
    to see how this works:</p>
  <button id="btnSave" class="btn btn-default">
    Save Layout
  </button>
  <button id="btnRestore" class="btn btn-default">
    Restore Layout
  </button>
</div>

CSS

.wj-flexgrid {
    max-height: 300px;
    margin: 10px 0;
}
.column-picker-icon {
    cursor: pointer;
    color: #FF8754;
    margin: 3px;
}
.wj-listbox.column-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0 10px;    
    columns: 4; /* IE fallback */
    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);
}
.wj-listbox .wj-listbox-item > label {
    cursor: pointer;
    display: block;
    margin: 0 0 2px 0;
}
.wj-listbox .wj-listbox-item {
  border: 2px solid transparent;
  padding: 4px 2px;
}

.wj-listbox .wj-listbox-item.wj-state-selected {
  background: transparent;
  color: inherit;
}
.wj-listbox .wj-listbox-item:hover {
  background: rgba(0,0,0,.05);
}

.wj-listbox {
  overflow: hidden;
}
.wj-listbox .drop-marker {
  position: absolute;
  background: #0085c7;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1000;
}

JavaScript

window.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);
    }
  });

  applyDragging(theColumnPicker);

  // 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,...