5.20203.748
Wijmo API Module wijmo.vue2.core Wijmo API Module

wijmo.vue2.core Module

Wijmo interop module for Vue 2.

This module provides Vue 2 components that encapsulate Wijmo controls.

To use it, your application must include references to the Vue 2 framework (RC6 or later), as well as the regular Wijmo CSS and js files.

To add Wijmo controls to Vue pages, include the appropriate tags in your HTML files. For example, the code below adds an InputNumber control to a Vue page:

<wj-input-number
  format="c2"
  placeholder="Sales"
  :value="sales"
  :value-changed="salesChanged"
  :min="0"
  :max="10000"
  :step="100"
  :is-required="false">
</wj-input-number>
// Wijmo event handler
// update "sales" value to match the InputNumber value
function salesChanged(sender, eventArgs) {
  this.sales = sender.value;
}

The example illustrates the following important points:

  1. Wijmo controls have tag names that start with the "wj" prefix, followed by the control name using lower-case and hyphen separators.
  2. The tag attribute names match the control's properties and events.
  3. Colons before attribute names indicate the attribute value should be interpreted as JavaScript expressions (e.g. :min="0").
  4. Event handlers are specified the same way as regular properties (e.g. :value-changed="salesChanged").
  5. In Vue2, all bindings are one-way. In the example above, the "salesChanged" event handler is responsible for updating the value of the "sales" property in the model. This is a change from Vue 1, where two-way bindings could be created by adding the ".sync" suffix to any attribute.

All Wijmo Vue components include an "initialized" event that is raised after the control has been added to the page and initialized. You can use this event to perform additional initialization in addition to setting properties in markup. For example:

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
// Vue application
var app = new Vue({
  el: '#app',
  methods: {
    initGrid: function(s, e) {
      // assign a custom MergeManager to the grid
      s.mergeManager = new CustomMergeManager(s);
    }
  }
});

Variables

WjFormat

WjFormat: any

Vue filter that applies globalized formatting to dates and numbers.

For example, the code below uses the wj-format filter to format a number as a currency value and a date as a short date using the current Wijmo culture:

<p>value: {​{ theAmount | wj-format('c') }}</p>
<p>date: {​{ theDate | wj-format('d') }}</p>

WjInclude

WjInclude: any

Vue component that includes a given HTML fragment into the document.

The wj-include component takes a src attribute that specifies a file to load and include into the document. For example:

<wj-popup control="modalDialog" :modal="true" :hide-trigger="None">
  <wj-include src="includes/dialog.htm"></wj-include>
</wj-popup>

WjTooltip

WjTooltip: any

Vue directive for the Tooltip class.

Use the wjTooltip directive to add tooltips to elements on the page. The wjTooltip directive supports HTML content, smart positioning, and touch.

The wjTooltip directive is specified as a v-wjTooltip attribute added to the element that the tooltip applies to. The parameter value is the tooltip text or the id of an element that contains the text.

You can also specify the tooltip with additional properties. In this case the directive value is an object with property values. The possible properties are:

  • tooltip - tooltip text or element id.
  • position - represents the Tooltip.position property.

For example:

<p v-wjTooltip="'Just a string'">
    Paragraph with a string tooltip.
</p>
<p v-wjTooltip="{tooltip: '#fineprint', position: 'Left'}>
    Paragraph with a tooltip defined as an element.
</p>
...
<div id="fineprint" style="display:none">
  <h3>Important Note</h3>
  <p>
    Data for the current quarter is estimated
    by pro-rating etc.</p>
</div>