Demo - TabPanel and Wijmo Controls

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.nav.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.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">
  <h1>
    Hosting Wijmo Controls
  </h1>
  <p>
    One of the main benefits of the TabPanel control
    is that it automatically updates any Wijmo controls
    it contains when a new tab is selected.</p>
  <p>
    When using other tab controls, you must add code to
    refresh any Wijmo controls contained in the tabs.</p>
  <div id="theTabPanel">
    <div>
      <a>First FlexGrid</a>
      <div>
        <div id="theFirstGrid"></div>
      </div>
    </div>
    <div>
      <a>Second FlexGrid</a>
      <div>
        <div id="theSecondGrid"></div>
      </div>
    </div>
    <div>
      <a>Third FlexGrid</a>
      <div>
        <div id="theThirdGrid"></div>
      </div>
    </div>
  </div>
</div>

CSS

.wj-tabpane {
  padding: 12px;
}
.wj-tabpanel .wj-gauge {
    width: 300px;
    margin: auto auto;
}
.wj-flexgrid {
  height: 300px;
}

JavaScript

onload = function() {

  var theTabPanel = new wijmo.nav.TabPanel('#theTabPanel');
  var theFirstGrid = new wijmo.grid.FlexGrid('#theFirstGrid', {
    itemsSource: getData()
  });
  var theSecondGrid = new wijmo.grid.FlexGrid('#theSecondGrid', {
    itemsSource: getData()
  });
  var theThirdGrid = new wijmo.grid.FlexGrid('#theThirdGrid', {
    itemsSource: getData()
  });

  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      	data = [];
    for (var i = 0; i < 2500; i++) {
      data.push({
        country: countries[i % countries.length],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000,
        downloads: Math.round(Math.random() * 20000),
      });
    }
    return data;
  }
}