The **ImmutabilityProvider** object, being attached to a FlexGrid control, 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_.
In framework interops, this class is usually represented by a framework specific component, like a ImmutabilityProvider component for React, which is more convenient to use in the context of the framework.
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 datagrid, the 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 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_.
import { ImmutabilityProvider, DataChangeEventArgs, DataChangeAction } from '@mescius/wijmo.grid.immutable';
import { FlexGrid } from '@mescius/wijmo.grid';
import { store } from './store';
import { addItemAction, removeItemAction, changeItemAction } from './actions';
const grid = new FlexGrid('#grid', {
allowAddNew: true,
allowDelete: true
});
const provider = new ImmutabilityProvider(grid, {
itemsSource: store.getState().items,
dataChanged: (s: ImmutabilityProvider, e: DataChangeEventArgs) => {
switch (e.action) {
case DataChangeAction.Add:
store.dispatch(addItemAction(e.newItem));
break;
case DataChangeAction.Remove:
store.dispatch(removeItemAction(e.newItem, e.itemIndex));
break;
case DataChangeAction.Change:
store.dispatch(changeItemAction(e.newItem, e.itemIndex));
break;
}
}
});
store.subscribe(() => {
provider.itemsSource = store.getState().items;
})
constructor(grid: FlexGrid, options?: any): ImmutabilityProvider
Creates an instance of the ImmutabilityProvider attached to the specified FlexGrid control.
Initialization options for the ImmutabilityProvider instance.
Gets a CollectionView object internally maintained by the ImmutabilityProvider. You *can not* change data in this CollectionView, instead any data changes must be dispatched to the _Store_. But you can change its sort/group/filter settings, use currency and data change events.
Gets or sets a source data array that should be displayed in the controlled FlexGrid. The **FlexGrid.itemsSource** property **should not** be assigned. Every time a new version of the source array appears in the _Store_, this property must be re-assigned with this new array instance. This can be done, for example, in the handler function for the _Store_ change event.
onCloningItem(e: CloningItemEventArgs): void
Raises the cloningItem event.
CloningItemEventArgs that contains the event data.
onDataChanged(e: DataChangeEventArgs): void
Raises the dataChanged event.
DataChangeEventArgs that contains the event data.
Triggered when FlexGrid needs to create a clone of an item which is about to be changed.
This event allows you to provide a custom logic for cloning items. The cloned item should be assigned to the clonedItem property of the event arguments.
Triggered after a user has added, removed or changed a data item in the controlled FlexGrid instance. Can be used to dispatch a corresponding data change action to the _Store_.