Demo - Wijmo Themes

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

  <h1>
    Wijmo Themes</h1>
  <p>
    Wijmo controls are styled using CSS. 
    The default look is provided by the required 'wijmo.css' file,
    and over 20 beautiful themes are included as optional CSS files.</p>
  <p>
    In addition to the CSS files included with Wijmo, you can use
    standard CSS selectors to customize the look of any Wijmo 
    control.</p>

  <label>
    Please Select a theme:
    <div id="theTheme"></div>
  </label>

  <p>Here are some input controls:</p>
  <div id="theCombo"></div>
  <div id="theDate"></div>
  <div id="theCalendar"></div>

  <p>This is a FlexGrid:</p>
  <div id="theGrid"></div>
</div>

CSS

.wj-flexgrid {
  height: 150px;
  font-style: italic;
}
.wj-control {
  margin-bottom: 6px;
}
.wj-calendar {
  max-width: 400px;
}
.container.wj-control {
  border: none;
}

JavaScript

onload = function() {

	// ComboBox to select the theme
  var theTheme = new wijmo.input.ComboBox('#theTheme', {
  
  	// some wijmo theme names
    itemsSource: [
  		'(Default)',
    	'Cerulean', 'Cleandark', 'Cleanlight', 'Cocoa', 'Coral',
    	'Cyborg', 'Dark', 'Darkly', 'Flatly', 'Grayscale',
    	'Highcontrast', 'Light', 'Midnight', 'Minimal', 'Modern',
    	'Organic', 'Simplex', 'Slate', 'Superhero', 'Trust', 'Zen',
    	'Office', 'Paper', 'Material'
  	],
    selectedIndexChanged: function(s, e) {

			// build theme URL
      var cssRoot = 'https://cdn.grapecity.com/wijmo/5.latest/styles/',
          url = cssRoot + 'wijmo.min.css';
			if (theTheme.selectedIndex > 0) {
      	url = cssRoot + 'themes/wijmo.theme.' + theTheme.text.toLowerCase() + '.min.css';
			}
    
			// apply theme url to page
			var links = document.getElementsByTagName('link'),
      		lastLink = links[links.length -1];
      if (lastLink.href.indexOf('themes/wijmo.theme.') > -1) {
      	lastLink.href = url; // change last link
      } else { // append link
 				var link = document.createElement('link');
      	link.rel = 'stylesheet';
      	link.type = 'text/css';
      	link.href = url;
				lastLink.parentElement.appendChild(link);
      }
    }
  });
  
  // generate some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  // create some controls to demonstrate the selected theme
  var theCombo = new wijmo.input.ComboBox('#theCombo', {
    itemsSource: data,
    displayMemberPath: 'country'
  });
  var theDate = new wijmo.input.InputDate('#theDate', {
    value: new Date()
  });
  var theCalendar = new wijmo.input.Calendar('#theCalendar', {
    value: new Date()
  });
  var grid = new...