Creating Wijmo 5 Controls

Every Wijmo 5 control is associated with an HTML element that hosts it on the page. To create a control, you start by adding a div element to the page, then use JavaScript code to instantiate the control and bind it to the host element.

For example, this fiddle shows how you can create a FlexGrid and a FlexChart and bind them to a small data source:

The fiddle includes all the necessary references (as described in the Referencing Wijmo 5 in your Applications topic). The HTML part of the fiddle declares two div elements named 'theGrid' and 'theChart':

<h1>Hello</h1>

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

<p>And this is a FlexChart:</p>
<div id="theChart"></div>

<p>That's it for now...</p>

The JavaScript part of the fiddle executes when the document has loaded. It creates a small data set, binds the controls to the div elements, then binds the controls to the data set:

<script id="scriptInit">
onload = function () {

  // 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 grid and show data
  var grid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data
  });

  // create a chart and show the same data    
  var chart = new wijmo.chart.FlexChart('#theChart', {
      itemsSource: data,
      bindingX: 'country',
      series: [
          { name: 'Sales', binding: 'sales' },
          { name: 'Expenses', binding: 'expenses' },
          { name: 'Downloads', binding: 'downloads', chartType: wijmo.chart.ChartType.LineSymbols } ]
  });
}
</script>

Notice that the size and position of the control are determined by the host element. In this case, we use CSS to set the grid's height to "auto," causing it to automatically size itself to its contents. We also set the max-height value so if there are too many items to fit the space the grid will automatically show scrollbars.

In most cases, you use a CSS framework such as Bootstrap to lay out your pages, and you lay out the controls exactly like any other HTML elements.

You can get a reference to the element that hosts a Wijmo control using the control's hostElement property. You can get a reference to the control being hosted by a given element using the Control.getControl(element) static method.

For more details on control sizing and layout, see the Sizing and Styling Controls topic.

You can use div elements as hosts for all Wijmo controls. Additionally, you can use input elements as hosts for the most input controls, and select elements as hosts for the ListBox, ComboBox, AutoComplete, and Menu controls.