Demo - FlexGrid Spinners

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.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid Spinners
  </h1>
  <p>
    This sample shows how you can add spinners to the FlexGrid control
    to indicate it is loading data. The basic idea is to add a spinner
    element to the grid when you start loading the data, and remove the
    spinner when you get the data back.</p>

  <h3>
    GIF Spinners</h3>
  <p>
    This example shows an animated GIF while the grid is loading:</p>
  <button id="btn-load-gif" class="btn btn-primary">
    Load Grid Using GIF Spinner
  </button>
  <div id="theGridGif"></div>
  <div style="display:none">
    <div id="theSpinnerGif" class="spinner">
      <img src="https://preloaders.net/preloaders/159/Rounded%20blocks.gif">
    </div>
  </div>

  <h3>
    Gauge Spinners
  </h3>
  <p>
    This example shows an animated RadialGauge while the grid is loading:</p>
  <button id="btn-load-gauge" class="btn btn-primary">
    Load Grid Using Gauge Spinner
  </button>
  <div id="theGridGauge"></div>
  <div style="display:none">
    <div id="theSpinnerGauge" class="spinner"></div>
  </div>

</div>

CSS

.wj-flexgrid {
  max-height: 250px;
}
.wj-radialgauge.spinner {
  margin: auto auto;
  padding-bottom: 32px;
  max-width: 200px;
}
.spinner img,
.spinner.wj-gauge {
  display: block;
  margin: auto;
  margin-top: 20px;
}
.btn {
  margin-bottom: 6px;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  //---------------------------------------------------------------------
  // create a grid to use with GIF spinner
  var theGridGif = new wijmo.grid.FlexGrid('#theGridGif');
  var theSpinnerGif = document.getElementById('theSpinnerGif');

  // load data into the grid
  document.getElementById('btn-load-gif').addEventListener('click', function() {

    // prepare to load data
    theGridGif.isDisabled = true;
    theGridGif.itemsSource = null;
    theGridGif.hostElement.insertBefore(theSpinnerGif, theGridGif.hostElement.firstChild);

    // load data with a delay
    getData(function(data) {
      theGridGif.itemsSource = data;
      theGridGif.isDisabled = false;
      theSpinnerGif.parentElement.removeChild(theSpinnerGif);
    }, 3000);
  })

  //---------------------------------------------------------------------
  // create a grid to use with Gauge spinner
  var theGridGauge = new wijmo.grid.FlexGrid('#theGridGauge');

  // load data into the grid
  document.getElementById('btn-load-gauge').addEventListener('click', function() {

    // prepare to load data
    theGridGauge.itemsSource = null;
    setSpinner(theGridGauge, true);

    // load data
    getData(function(data) {
      theGridGauge.itemsSource = data;
      setSpinner(theGridGauge, false);
    }, 3000);
  });

  // create a spinner Gauge
  var theSpinnerInterval;
  var theSpinnerGauge = new wijmo.gauge.RadialGauge('#theSpinnerGauge', {
    isAnimated: false,
    showText: 'None',
    sweepAngle: 360,
    step: 5,
    showTicks: true
  });
  theSpinnerGauge.face.color = 'transparent';

  // add or remove a spinner to/from the grid
  function setSpinner(grid, on) {

    // stop spinner
    if (theSpinnerInterval) {
      clearInterval(theSpinnerInterval);
      theSpinnerInterval = null;
    }

    // add/remove spinner
    var spinner = theSpinnerGauge.hostElement;
    if (on) {
      grid.isDisabled = true;
      grid.hostElement.insertBefore(spinner,...