- Grid, DataView objects through reactGridCreated
- Grid, DataView objects & Services via
instances
bindable
In some cases you might want a feature that is not yet available in slickgrid-react
but exists in the original SlickGrid
, what should you do? Fear not, we got you covered. slickgrid-react
exposes the SlickGrid Grid
and DataView
objects through Event Aggregators, these objects are created when slickgrid-react initialize the grid (with defineGrid()
). So if you subscribe to the Event Aggregator, you will get the SlickGrid and DataView objects and from there you can call any of the SlickGrid features.
The preferred way is now to use the SlickgridReactInstance
via the instances
bindable as shown here
Since version 2.x
, we can now access the Slick Grid
& DataView
objects directly from the SlickgridReactInstance
through the onReactGridCreated
Event Dispatch, for example:
import { SlickgridReactInstance, Column, GridOption } from 'slickgrid-react';
export class MyApp extends React.Component<Props, State> {
reactGrid: SlickgridReactInstance;
columnDefinitions: Column[];
gridOptions: GridOption;
dataset: any[];
isAutoEdit = true;
gridObj: SlickGrid;
dataViewObj: SlickDataView;
reactGridReady(reactGrid: SlickgridReactInstance) {
this.reactGrid = reactGrid;
// the React Grid Instance exposes both Slick Grid & DataView objects
this.gridObj = reactGrid.slickGrid;
this.dataViewObj = reactGrid.dataView;
}
/** Change dynamically `autoEdit` grid options */
setAutoEdit(isAutoEdit) {
this.isAutoEdit = isAutoEdit;
this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
return true;
}
collapseAllGroups() {
this.dataviewObj.collapseAllGroups();
}
expandAllGroups() {
this.dataviewObj.expandAllGroups();
}
render() {
return !this.state.gridOptions ? '' : (
<div id='demo-container' className='container-fluid'>
<div className='col-sm-6'>
<label className="me-1">autoEdit setting:</label>
<span id='radioAutoEdit'>
<label className='radio-inline control-label me-1' htmlFor='radioTrue'>
<input
type='radio'
name='inlineRadioOptions'
id='radioTrue'
defaultChecked={this.state.isAutoEdit}
onInput={() => this.setAutoEdit(true)}
/>{' '}
ON (single-click)
</label>
<label className='radio-inline control-label' htmlFor='radioFalse'>
<input
type='radio'
name='inlineRadioOptions'
id='radioFalse'
onInput={() => this.setAutoEdit(false)}
/>{' '}
OFF (double-click)
</label>
</span>
</div>
<div className='col-sm-12'>
<SlickgridReact
gridId='grid3'
columnDefinitions={this.state.columnDefinitions}
gridOptions={this.state.gridOptions}
dataset={this.state.dataset}
onReactGridCreated={e => { this.reactGridReady(e.detail); }}
onCellChange={e => { this.onCellChanged(e.detail.eventData, e.detail.args); }}
onClick={e => { this.onCellClicked(e.detail.eventData, e.detail.args); }}
onValidationError={e => { this.onCellValidationError(e.detail.eventData, e.detail.args); }}
/>
</div>
</div>
);
}
}
You could also get all the Service instances via the new instances
bindable property
import { SlickgridReactInstance, Column, GridOption } from 'slickgrid-react';
export class MyApp extends React.Component<Props, State> {
reactGrid: SlickgridReactInstance;
/** Change dynamically `autoEdit` grid options */
setAutoEdit(isAutoEdit) {
this.isAutoEdit = isAutoEdit;
this.reactGrid.slickGrid.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
return true;
}
render() {
return (
<SlickgridReact gridId="grid1"
columnDefinitions={this.state.columnDefinitions}
gridOptions={this.state.gridOptions}
dataset={this.state.dataset}
onReactGridCreated={$event => this.reactGridReady($event.detail)}
/>
);
}
}
You have access to all original SlickGrid events which you can subscribe, for more info refer to the Docs - Grid & DataView Events
There's already all the necessary information on how to use this on the Docs - Grid & DataView Events page, so I suggest you to head over to that Wiki page on how to use the SlickGrid
and DataView
objects