React component that encapsulates the FlexChart control.
The example below shows how to instantiate and initialize a FlexChart control in JSX:
<Wj.FlexChart
itemsSource={ this.state.data }
bindingX="name"
header={ this.state.header }
footer={ this.state.footer }
axisX={{ title: this.state.titleX }}
axisY={{ title: this.state.titleY }}
legend={{ position: this.state.legendPosition }}
series={[
{ name: 'Sales', binding: 'sales' },
{ name: 'Expenses', binding: 'expenses' },
{ name: 'Downloads', binding: 'downloads', chartType: 'LineSymbols' }
]} />
The code sets the itemsSource property to a collection that contains the data to chart and the bindingX property to specify the name of the data property to use for the chart's X values.
It sets the header and footer properties to specify the chart titles, and customizes the chart's axes and legend.
Finally, it sets the series property to an array that specifies the data items that the chart should display.
React component that encapsulates the FlexGrid control.
The example below shows how to instantiate and initialize a FlexGrid control in JSX:
<Wj.FlexGrid
autoGenerateColumns={ false }
columns={[
{ binding: 'name', header: 'Name' },
{ binding: 'sales', header: 'Sales', format: 'c0' },
{ binding: 'expenses', header: 'Expenses', format: 'c0' },
{ binding: 'active', header: 'Active' },
{ binding: 'date', header: 'Date' }
]}
itemsSource={ this.state.data } />
The code sets the autoGenerateColumns property to false, then sets the columns property, and finally sets the itemsSource property. This order is important, it prevents the grid from automatically generating the columns.
React component that encapsulates the LinearGauge control.
The example below shows how to instantiate and initialize a LinearGauge control in JSX:
<Wj.LinearGauge
min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false }
value={ this.state.view.currentItem.sales }
valueChanged={ this.salesChanged }
format="c0" thumbSize={ 20 } showRanges={ false }
face={{ thickness:0.5 }}
pointer={{ thickness:0.5 }}
ranges={[
{ min: 0, max: 333, color: 'red' },
{ min: 333, max: 666, color: 'gold' },
{ min: 666, max: 1000, color: 'green' }
]} />
The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it sets the value and valueChanged properties to create a two-way binding for the gauge's value.
Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.
React component that encapsulates the RadialGauge control.
The example below shows how to instantiate and initialize a RadialGauge control in JSX:
<Wj.RadialGauge
min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false }
value={ this.state.view.currentItem.sales }
valueChanged={ this.salesChanged }
format="c0" thumbSize={ 12 } showRanges={ false } showText="Value"
face={{ thickness:0.5 }}
pointer={{ thickness:0.5 }}
ranges={[
{ min: 0, max: 333, color: 'red' },
{ min: 333, max: 666, color: 'gold' },
{ min: 666, max: 1000, color: 'green' }
]} />
The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it sets the value and valueChanged properties to create a two-way binding for the gauge's value.
Then it sets the format, thumbSize, showText, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.
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:
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); }} />