Documentation
Getting Started
QuickStart
PureJS
5.20231.904
5.20231.904

Using Wijmo in PureJS

Note We highly recommend that you download the Wijmo dev kit in addition to installing from npm. The dev kit includes hundreds of samples with source code, reference apps and more.

Installation

Wijmo is represented on npm with packages for each module. As with all npm packages, you need to have NodeJS installed on your computer to use it.

The latest wijmo release version can be installed from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/wijmo.purejs.all

This will install all of our pure JavaScript modules. If you want to install support for other frameworks or to install specific control modules, see: referencing npm.

Adding Wijmo to your Application

First, add a host element to your application and give it an ID. This is the HTML element that will be converted to the Wijmo control.

<div id="hostElement"></div>

Wijmo package contains JavaScript modules in CommonJS format. You can use them along with tools that are capable of loading modules, like the Webpack bundler or SystemJS run-time module loader.

To import Wijmo modules into your application backed by TypeScript or Babel you can use ES2015 import statements. All module names in import statements begin with the "@grapecity/" prefix, followed by the module name. For example, the following code imports the "wijmo.grid" module and creates an instance of the FlexGrid control:

import * as wjcGrid from '@grapecity/wijmo.grid';
let grid = new wjcGrid.FlexGrid('#hostElement');

If you write code in ES5 then the CommonJS require() function can be used to import modules. For example:

var wjcGrid = require('@grapecity/wijmo.grid');
var grid = new wjcGrid.FlexGrid('#hostElement');

Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo CSS files into your application. The styles are shipped in the @grapecity/wijmo.styles npm package.

You can load styles application by adding this import statement to the top of a common CSS file:

@import '@grapecity/wijmo.styles/wijmo.css';

Please see our Using Wijmo with NPM article for more details on how Wijmo npm modules can be used along with popular development tools like Angular CLI, create-react-app, Vue CLI, and Ionic CLI.