Slick Grid/DataView Objects

index

• 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

Grid & DataView objects through reactGridCreated

Since version 2.x, we can now access the Slick Grid & DataView objects directly from the SlickgridReactInstance through the onReactGridCreated Event Dispatch, for example:

Component

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>
    );
  }
}

Grid & DataView objects & Services through instances bindable

You could also get all the Service instances via the new instances bindable property

Component

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)}
      />
    );
  }
}

SlickGrid Events (original SlickGrid)

You have access to all original SlickGrid events which you can subscribe, for more info refer to the Docs - Grid & DataView Events

Usage

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