# Wijmo_React_Grid_Immutable ## Content

wijmo.react.grid.immutable Module

Wijmo interop module for React, which provides the wijmo.react.grid.immutable.ImmutabilityProvider component and its accompanying stuff. It allows you to use wijmo.react.grid.FlexGrid component with immutable data sources, while keeping all FlexGrid data editing and data transformation capabilities. It can be used to incorporate full-featured datagrid components in applications driven by state management systems that require data immutability, such as Redux.

Variables

Variables

Const ImmutabilityProvider

ImmutabilityProvider: WjForwardRefExoticComponent<ImmutabilityProviderProps>

React component that represents a wijmo.grid.immutable.ImmutabilityProvider in a wijmo.react.grid.FlexGrid.

The wijmo.react.grid.immutable.ImmutabilityProvider component, being added to a wijmo.react.grid.FlexGrid component, allows the latter to perform data edits without mutating the underlying data. Instead, this class provides a data change event, which can be used to dispatch change actions to the global Store, such as a Redux Store.

The controlled FlexGrid control should not specify its itemsSource. Instead, the itemsSource property of this class instance should be assigned with the immutable array from the Store, which grid will display and edit.

When a user edits data via the grid, the wijmo.grid.immutable.ImmutabilityProvider.dataChanged event is triggered, bringing all the necessary information to you about the change (which item is affected, if item was changed or added or deleted, and so on). This event should be used to dispatch corresponding data change actions to the Store.

Note that FlexGrid edits data on a row level basis, which means that you can change multiple cell values in the same row, and only after you move focus out of the row, all the changes to the row will be applied simultaneously. Or you can press the Cancel key to cancel all the changes in the row. The same is true for adding a row into the datagrid.

Note also that some changes like pasting a text into the datagrid, or deleting rows, can affect multiple rows. In this case ImmutabilityProvider will trigger the wijmo.grid.immutable.ImmutabilityProvider.dataChanged event multiple times, separately for each affected row. This simplifies data change processing in the Store reducers.

This example demonstrates a fully editable FlexGrid component, with an associated ImmutabilityProvider component bound to an array from the Redux Store. The dataChanged event handler dispatches corresponding data change actions to the Store. The example assumes that Redux Store data and action creator functions are bound to the presentation component as properties, using the react-redux connect method.

import { DataChangeEventArgs, DataChangeAction } from '@mescius/wijmo.grid.immutable';
import { ImmutabilityProvider } from '@mescius/wijmo.react.grid.immutable';
import { FlexGrid } from '@mescius/wijmo.react.grid';

export class GridView extends React.Component<any, any> {
  render() {
    return <FlexGrid allowAddNew allowDelete>
       <ImmutabilityProvider
          itemsSource={this.props.items}
          dataChanged={this.onGridDataChanged} />
    </FlexGrid>
  }
  onGridDataChanged(s: ImmutabilityProvider, e: DataChangeEventArgs) {
      switch (e.action) {
          case DataChangeAction.Add:
              this.props.addItemAction(e.newItem);
              break;
          case DataChangeAction.Remove:
              this.props.removeItemAction(e.newItem, e.itemIndex);
              break;
          case DataChangeAction.Change:
              this.props.changeItemAction(e.newItem, e.itemIndex);
              break;
      }
  }
}