v5.20192.624
|

wijmo.react.grid.sheet Module

Wijmo interop module for React.

This module provides React components that encapsulate Wijmo controls.

To use it, your application must include references to the React and ReactDOM libraries, as well as the regular Wijmo CSS and js files.

To add Wijmo controls to React components, include the appropriate tags in your JSX (or TSX) files. For example, the code below adds an InputNumber control to a React component:

<label htmlFor="inputnumber">Here's an InputNumber control:</label>
<Wj.InputNumber
  id="inputNumber"
  format="c2"
  min={ 0 } max={ 10 } step={ .5 }
  value={ this.state.value }
  valueChanged={ this.valueChanged }/>

The example illustrates the following important points:

  1. Wijmo controls have tag names that start with the "Wj" prefix, followed by the control name. The "Wj" is a shorthand for the full module name "wijmo.react" which can also be used.
  2. The tag attribute names match the control's properties and events.
  3. Attribute values enclosed in quotes are interpreted as strings, and values enclosed in curly braces are interpreted as JavaScript expressions.
  4. React components do not have implicit two-way bindings, so controls that modify values typically use event handlers to explicitly apply changes to the parent component's state.

To illustrate this last point, the component that contains the markup given above would typically implement a "valueChanged" event handler as follows:

valueChanged: function(s, e) {
  this.setState({ value, s.value });
}

The event handler calls React's setState method to update the component state, automatically triggering a UI update. Notice that the method does not write directly into the "state" object, which should be treated as immutable in React applications.

All Wijmo React 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.FlexGrid
  initialized={ function(s,e) {

    // assign a custom MergeManager to the grid
    s.mergeManager = new CustomMergeManager(s);

  }}
/>

Classes