Welcome to Wijmo 5

302 Pages·2016·2.22 MB·English

by  Chris Bannon

Wijmo 5
version 5.20163.254
Table of Contents
Introduction Wijmo Modules Interop Modules
Welcome to Wijmo 5 wijmo angular
Referencing Wijmo 5 collections angular2
Creating Controls  grid input
Sizing and Styling Controls filter  grid
Pseudo Classes grouppanel filter
Events detail grouppanel
Enumerations pdf detail
Globalization xlsx sheet
Glyphs sheet multirow
JavaScript Intellisense multirow  chart
Angular 1 Directives input analytics
Angular 2 Components  chart animation
Using LESS analytics annotation
animation hierarchical
annotation interaction
hierarchical radar
interaction  finance
radar analytics
 finance gauge
analytics olap
gauge knockout
odata react
xlsx vue
pdf vue2
olap
viewer
Welcome to Wijmo 5
Wijmo 5 represents a new generation of JavaScript controls. It takes full advantage of the latest HTML5 technologies, making no compromises to support legacy
browsers. The result is a set of controls that are much faster, smaller, and easier to use than what was possible before.
Wijmo 5 has no dependencies other than EcmaScript5. You can use it without jQuery, jQueryUI, or any other frameworks.
Wijmo 5 requires modern browsers ﴾IE9 or better﴿ to leverage the following technologies:
ECMAScript 5: The ECMAScript 5 standard adds support for property getters and setters. This may seem like a small change, but it makes a huge difference. For
example, instead of writing control.value(control.value() + 1) to increment the value of a property, now you can write control.value++. The ECMAScript 5
standard adds many other significant enhancements, like the bind ﴾http://javascriptissexy.com/javascript‐apply‐call‐and‐bind‐methods‐are‐essential‐for‐
javascript‐professionals/﴿ method that allows you to specify the value of the 'this' parameter in your callbacks. There are also new array methods
﴾https://www.inkling.com/read/javascript‐definitive‐guide‐david‐flanagan‐6th/chapter‐7/ecmascript‐5‐array‐methods﴿ that can save a lot of time.
SVG: Modern browsers implement SVG, which makes it easier to create amazing visual representations of your data. Wijmo leverages SVG directly, without the
overhead that would be required if it had to support legacy browsers.
TypeScript: We wrote Wijmo in TypeScript, taking advantage of type‐checking and OOP concepts such as modules, classes, and inheritance. The output is still
pure JavaScript, so you can use either language in your own development work.
Mobile Devices: Wijmo 5 was designed with mobile browser support built in from the start. Responsive layouts and touch support were major considerations in
the design and implementation of every Wijmo 5 control.
AngularJS: AngularJS is one of the most popular and powerful JavaScript application frameworks today. We have supported Angular 1.x since it was released,
and Angular 2 even before it was released! For more information, see the Using Wijmo 5 in AngularJS Applications topic.
Other frameworks: You can use Wijmo with any other JavaScript frameworks you like. In addition to AngularJS 1.x and 2.x, we ship interop modules for React,
Vue, and KnockoutJS. We plan to add other frameworks to this list in the future, based on customer requests.
Bootstrap: Bootstrap is one of the easiest, most powerful, and most popular CSS frameworks available. We use it in our samples and in our on‐line
documentation. If you use Bootstrap, be assured that Wijmo 5 will blend right in with no extra effort required on your part.
We do realize that some scenarios require support for legacy browsers ﴾IE8 and earlier﴿. For that reason, we will continue to maintain versions of the original Wijmo for
as long as our customers require it. If you need to support IE8 and earlier, keep using the original Wijmo. We will maintain and support it as usual. If you are ready to
move to HTML5 and modern browsers, Wijmo 5 is for you!
Referencing Wijmo 5 in Your Applications
To use Wijmo 5 in your applications, include it by adding a few references to your HTML pages.
The minimal set of files required by any Wijmo 5 application is:
wijmo.js: Contains the Wijmo 5 infrastructure including the Globalize, Event, Control, and CollectionView classes.
wijmo.css: Contains the CSS rules used for styling all Wijmo 5 controls.
In addition to these, include one or more additional files, depending on which components you use:
wijmo.grid.js: Contains the FlexGrid control.
wijmo.chart.js: Contains the FlexChart and FlexPie controls.
wijmo.input.js: Contains several input controls, including ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, and
Calendar controls.
wijmo.gauge.js: Contains several gauge controls, including LinearGauge, RadialGauge, and BulletGraph.
angular.js: Google's AngularJS framework, required for AngularJS applications.
wijmo.angular.js: Contains AngularJS directives that allow you to use Wijmo 5 controls directly in your markup.
wijmo.culture.[CultureName].js: Contains culture‐specific files used to develop applications in languages other than American English.
wijmo.theme.[ThemeName].css: Contains CSS rules used to customize the appearance of the Wijmo 5 controls.
As for the actual location of the files, you have two options. You may download Wijmo and copy the required files to the appropriate folders within your application, or
you may reference Wijmo files hosted in the cloud, on our Content Delivery Network ﴾CDN﴿. The sections below show examples.
Deploying Wijmo locally
Download the Wijmo files and copy them to a folder within your application. If you place the Wijmo script files in a folder called "scripts/vendors," and the css files in a
folder called "styles," you can add the following lines to your HTML pages:
<!‐‐ Wijmo references (required) ‐‐> 
<script src="scripts/vendor/controls/wijmo.min.js"></script> 
<link href="styles/wijmo.min.css" rel="stylesheet"/> 

<!‐‐ Wijmo controls (optional, include the controls you need) ‐‐> 
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script> 
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script> 
<script src="scripts/vendor/controls/wijmo.input.min.js"></script> 
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script> 

<!‐‐ Wijmo custom theme (optional, include the theme you like) ‐‐> 
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/> 

<!‐‐ Wijmo custom culture (optional, include the culture you want) ‐‐> 
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js"></script> 

<!‐‐ AngularJS and Wijmo directives (optional, use in AngularJS applications) ‐‐> 
<script src="scripts/vendor/angular.min.js"></script> 
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js"></script> 
Deploying Wijmo from CDN
In this case, there is nothing to download. Simply add the following lines to your HTML pages:
<!‐‐ Wijmo references (required) ‐‐> 
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.min.js"></script> 
<link href="http://cdn.wijmo.com/5.20142.15/styles/wijmo.min.css" rel="stylesheet"/> 

<!‐‐ Wijmo controls (optional, include the controls you need) ‐‐> 
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.grid.min.js"></script> 
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.chart.min.js"></script> 
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.input.min.js"></script> 
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.gauge.min.js"></script> 

<!‐‐ Wijmo custom theme (optional, include the theme you like) ‐‐> 
<link href="http://cdn.wijmo.com/5.20142.15/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/> 

<!‐‐ Wijmo custom culture (optional, include the culture you want) ‐‐> 
<script src="http://cdn.wijmo.com/5.20142.15/controls/cultures/wijmo.culture.ja.min.js"></script> 

<!‐‐ AngularJS and Wijmo directives (optional, use in AngularJS applications) ‐‐> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
<script src="http://cdn.wijmo.com/5.20142.15/interop/angular/wijmo.angular.min.js"></script>
The CDN version includes a Wijmo 5 watermark element at the bottom right of the screen. If you don't want to display the watermark, then you must deploy Wijmo
locally as described above.
Note: The order of the references is important. The wijmo.js module must be the first, followed by the control modules, control extensions, and the wijmo.angular
module should be included last.
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:
Example: Creating Controls
Show me ﴾http://jsfiddle.net/Wijmo5/MWue8﴿
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.
Sizing and Styling Controls
Wijmo 5 controls rely on CSS for styling, appearance, and sizing.
Because of this, Wijmo 5 controls don't have properties such as "width," "height," or "background." Styling and layout is handled using CSS. If you are used to .NET
controls, including WinForms and XAML, this may feel a little strange at first. But once you get used to CSS, you will find that it is very easy and extremely powerful.
You can easily style all instances of a control type, or style a specific control, all with a few lines of extremely re‐usable CSS.
Sizing Controls
The size and position of the controls are determined by the hosting element, which follows the usual HTML/CSS rules. For example, the CSS rule below stipulates that
elements with class "grid" should have their height calculated automatically to fit the grid content, up to a limit of 300 pixels:
.grid { 
    height: auto; 
    max‐height: 300px; 
}
The fiddle below shows how this rule affects two FlexGrid controls. The first grid has only a few items, so it is resized to fit its content ﴾like a regular HTML table﴿. The
second grid has a lot more items, so its height is automatically set to 300 pixels and it becomes scrollable.
Example: Sizing Controls
Show me ﴾http://jsfiddle.net/Wijmo5/J4zME﴿
The first grid has only five elements to show. Since that requires less than 300 pixels, the grid shows all elements and doesn't need scrollbars. The second grid contains
10,000 items. That exceeds 300 pixels, so the grid becomes scrollable.
Styling Controls
Control styling follows the same logic as sizing. Use CSS to override fonts, colors, margins, padding, and pretty much any visual aspect of any part of the controls.
For example, this fiddle shows how you can modify the appearance of the FlexGrid control using CSS:
Example: Styling Controls
Show me ﴾http://jsfiddle.net/Wijmo5/3L8Cf﴿
Notice how now the grids now have a plain black and white look. To do this, we change the CSS and specify the styles for elements within the grid. Wijmo controls
assign class names to their constituent elements, which enables easy and flexible styling.
For example, the CSS below creates cell elements ﴾elements with class "wj‐cell" contained in elements with class "grid"﴿ with no border and a white background:
.grid .wj‐cell { 
    border: none; 
    background‐color: #fff; 
} 
Code‐based Styling
Although the Wijmo 5 controls rely on CSS for layout and sizing, there are a few situations where you may want to use code to get total control of some aspects of a
control.
For example, the FlexGrid calculates the row heights based on the font being used to render the control. But you may want to override that CSS‐based setting and
specify the exact row heights yourself. You can do this by setting the following properties:
// set the height of rows in the scrollable area 
flex.rows.defaultSize = 34; 
// set the height of rows in the column header area 
flex.columnHeaders.rows.defaultSize = 40; 
This is shown in the fiddle below, which also uses CSS to achieve a very specific, customized look for the grid. The fiddle uses the "initialized" event to get a reference
to the FlexGrid control. This is a convenient way to get a reference to the control when it is created with markup.
Example: Code‐based Styling
Show me ﴾http://jsfiddle.net/Wijmo5/kzrutyj9﴿