Editors

PreviousCell Menu (Action Menu)NextAutocomplete

Last updated 3 days ago

Editors

index

Description

Note: For the Float Editor, you can provide decimal places with params: { decimalPlaces: 2 } to your column definition else it will be 0 decimal places by default.

Required Grid Option

Editors won't work without these 2 flags enableCellNavigation: true and editable: true enabled in your Grid Options, so make sure to always to always defined them. Also note that you can toggle the grid to read only (not editable) via the editable grid option flag.

Demo

with plain javascript

with React Custom Components

How to use Inline Editors

Simply call the editor in your column definition with the Editors you want, as for example (editor: { model: Editors.text }). Here is an example with a full column definition:

const columnDefinitions = [
  { id: 'title', name: 'Title', field: 'title', editor: { model: Editors.longText } },
  { id: 'duration', name: 'Duration (days)', field: 'duration', type: 'number', editor: { model: Editors.text } },
  { id: 'complete', name: '% Complete', field: 'percentComplete', type: 'number', editor: { model: Editors.integer } },
  { id: 'start', name: 'Start', field: 'start', type: 'date', editor: { model: Editors.date } },
  {
    id: 'finish', name: 'Finish', field: 'finish', type: 'date',
    editor: {
      model: Editors.date,

      // you can also add an optional placeholder
      placeholder: 'choose a date'
    }
  },
  {
    id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmarkMaterial,
    type: 'number', editor: { model: Editors.checkbox }
  }
];

const gridOptions {
  enableCellNavigation: true, // <<-- VERY IMPORTANT, it won't work without this flag enabled
  editable: true,
};

Demo with Float Editor and Dollar Currency Formatter

This probably comes often, so here's all the setting you would need for displaying & editing a dollar currency value with 2 decimal places.

const columnDefinitions = [
  {
    id: 'cost', name: 'Cost', field: 'cost',
    type: 'float',
    formatter: Formatters.dollar, // the Dollar Formatter will default to 2 decimals unless you provide a minDecimal/maxDecimal
    // params: { minDecimal: 2, maxDecimal: 4, }, // optionally provide different decimal places

    // the float editor has its own settings, `decimal` that will be used only in the editor
    // note: that it has nothing to do with the Dollar Formatter
    editor: { model: Editors.float, decimal: 2 },
  },
];

Editor Output Type & Save Output Type

You could also define an outputType and a saveOutputType to an inline editor. There is only 1 built-in Editor with this functionality for now which is the dateEditor. For example, on a date field, we can call this outputType: 'dateIso' (by default it uses dateUtc as the output):

const columnDefinitions = [
 {
   id: 'start', name: 'Start', field: 'start',
   type: 'date',
   editor: { model: Editors.date },
   type: 'date',              // dataset cell input format
   // outputType: 'dateUs',   // date picker format
   saveOutputType: 'dateUtc', // save output date format
  }
];

So to make it more clear, the saveOutputType is the format that will be sent to the onCellChange event, then the outputType is how the date will show up in the date picker (Vanilla-Calendar) and finally the type is basically the input format (coming from your dataset). Note however that each property are cascading, if 1 property is missing it will go to the next one until 1 is found... for example, on the onCellChange if you aren't defining saveOutputType, it will try to use outputType, if again none is provided it will try to use type and finally if none is provided it will use 'dateIso' as the default.

Perform an action After Inline Edit

Recommended way

Not recommended

You could also, perform an action after the item changed event with onCellChange. However, this is not the recommended way, since it would require to add a onCellChange on every every single column definition.

Custom Inline Editor

To use dependency injection with an Editor make sure your react dependencies are before the args constructor parameter. args must be the last parameter in your constructor because we wrap all Editors in React's Factory resolver so DI can work with slickgrid Editors

Once you are done with the class, just reference it's class name as the editor, for example:

Class implementing Editor

export class IntegerEditor implements Editor {
  constructor(private args: any) {
    this.init();
  }

  init(): void {}
  destroy() {}
  focus() {}
  loadValue(item: any) {}
  serializeValue() {}
  applyValue(item: any, state: any) {}
  isValueChanged() {}
  validate() {}
}

Use it in your Column Definition

const columnDefinitions = [
  {
    id: 'title2', name: 'Title, Custom Editor', field: 'title',
    editor: {
      model: CustomInputEditor // reference your custom editor class
    },
  }
];

How to prevent Editor from going to the next bottom cell?

The default behavior or SlickGrid is to go to the next cell at the bottom of the current cell that you are editing. You can change and remove this behavior by enabling autoCommitEdit which will save current editor and remain in the same cell

const gridOptions = {
  autoCommitEdit: true,
  editable: true,
}

OnClick Action Editor (icon click)

The Formatters.editIcon will give you a pen icon, while a Formatters.deleteIcon is an "x" icon

const columnDefinitions = [
   {
      id: 'edit', field: 'id',
      formatter: Formatters.editIcon,
      maxWidth: 30,
      onCellClick: (args: OnEventArgs) => {
        console.log(args);
      }
   },
   // ...
];

The args returned to the onCellClick callback is of type OnEventArgs which is the following:

export interface OnEventArgs {
  row: number;
  cell: number;
  columnDef: Column;
  dataContext: any;
  dataView: any;
  grid: any;
  gridDefinition: GridOption;
}

AutoComplete Editor

Select Editors

Here's an example with a collection, collectionFilterBy and collectionSortBy

const columnDefinitions = [
  {
    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
    editor: {
      model: Editors.multipleSelect,
      collection: Array.from(Array(12).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
      collectionSortBy: {
        property: 'label',
        sortDesc: true
      },
      collectionFilterBy: {
        property: 'label',
        value: 'Task 2'
      }
    }
  }
];

Editor Options (`MultipleSelectOption` interface)

editor: {
  model: Editors.SingleSelect,
  // previously known as `editorOptions` for < 9.0
  options: {
    maxHeight: 400
  } as MultipleSelectOption
}

Collection Async Load

You can also load the collection asynchronously, but for that you will have to use the collectionAsync property, which expect a Promise to be passed (it actually accepts 3 types: HttpClient, FetchClient or regular Promise).

Load the collection through an Http call

const columnDefinitions = [
    {
    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
    filterable: true,
    editor: {
      collectionAsync: fetch('api/data/pre-requisites'),
      model: Editors.multipleSelect,
    }
  }
];

Modifying the collection afterward

If you want to modify the collection afterward, you simply need to find the associated Column reference from the Column Definition and modify the collection property (not collectionAsync since that is only meant to be used on page load).

For example

  function addItem() {
    const lastRowIndex = dataset.length;
    const newRows = mockData(1, lastRowIndex);

    // wrap into a timer to simulate a backend async call
    setTimeout(() => {
      const requisiteColumnDef = columnDefinitions.find((column: Column) => column.id === 'prerequisites');
      if (requisiteColumnDef) {
        const editorCollection = requisiteColumnDef.editor.collection;

        if (Array.isArray(collection )) {
          // add the new row to the grid
          reactGridRef.current?.gridService.addItemToDatagrid(newRows[0]);

          // then refresh the Filter "collection", we have 2 ways of doing it

          // 1- Push to the Filter "collection"
          editorCollection.push({ value: lastRowIndex, label: lastRowIndex, prefix: 'Task' });

          // or 2- replace the entire "collection"
          // editorCollection = [...collection, ...[{ value: lastRowIndex, label: lastRowIndex }]];
        }
      }
    }, 250);
  }

Collection Label Prefix/Suffix

You can use labelPrefix and/or labelSuffix which will concatenate the multiple properties together (labelPrefix + label + labelSuffix) which will used by each Select Filter option label. You can also use the property separatorBetweenTextLabels to define a separator between prefix, label & suffix.

Note If enableTranslateLabel flag is set to True, it will also try to translate the Prefix / Suffix / OptionLabel texts.

For example, say you have this collection

const currencies = [
  { symbol: '$', currency: 'USD', country: 'USA' },
  { symbol: '$', currency: 'CAD', country: 'Canada' }
];

You can display all of these properties inside your dropdown labels, say you want to show (symbol with abbreviation and country name). Now you can.

So you can create the multipleSelect Filter with a customStructure by using the symbol as prefix, and country as suffix. That would make up something like this:

$ USD USA
$ CAD Canada

with a customStructure defined as

const columns = [
  id: 'currency', name: 'Currency', field: 'currency',
  editor: {
    collection: currencies,
    customStructure: {
      value: 'currency',
      label: 'currency',
      labelPrefix: 'symbol',
      labelSuffix: 'country',
    collectionOptions: {
      separatorBetweenTextLabels: ' ', // add white space between each text
      includePrefixSuffixToSelectedValues: true // should the selected value include the prefix/suffix in the output format
    },
    model: Editors.multipleSelect
  }
];

Collection Label Render HTML

By default HTML is not rendered and the label will simply show HTML as text. But in some cases you might want to render it, you can do so by enabling the enableRenderHtml flag.

NOTE: this is currently only used by the Editors that have a collection which are the MultipleSelect & SingleSelect Editors.

const columnDefinitions = [
  {
    id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
    formatter: Formatters.checkmarkMaterial,
    type: 'boolean',
    editor: {
      // display checkmark icon when True
      enableRenderHtml: true,
      collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check"></i> ` }, { value: false, label: 'False' }],
      model: Editors.singleSelect
    }
  }
];

`multiple-select.js` Options

Couple of small options were added to suit slickgrid-react needs, which is why it points to slickgrid-react/lib folder (which is our customized version of the original). This lib is required if you plan to use multipleSelect or singleSelect Filters. What was customized to (compare to the original) is the following:

okButton option was added to add an OK button for simpler closing of the dropdown after selecting multiple options.
- okButtonText was also added for locale (i18n)
offsetLeft option was added to make it possible to offset the dropdown. By default it is set to 0 and is aligned to the left of the select element. This option is particularly helpful when used as the last right column, not to fall off the screen.
autoDropWidth option was added to automatically resize the dropdown with the same width as the select filter element.
autoAdjustDropHeight (defaults to true), when set will automatically adjust the drop (up or down) height
autoAdjustDropPosition (defaults to true), when set will automatically calculate the area with the most available space and use best possible choise for the drop to show (up or down)
autoAdjustDropWidthByTextSize (defaults to true), when set will automatically adjust the drop (up or down) width by the text size (it will use largest text width)
to extend the previous 3 autoAdjustX flags, the following options can be helpful
- minWidth (defaults to null, to use when autoAdjustDropWidthByTextSize is enabled)
- maxWidth (defaults to 500, to use when autoAdjustDropWidthByTextSize is enabled)
- adjustHeightPadding (defaults to 10, to use when autoAdjustDropHeight is enabled), when using autoAdjustDropHeight we might want to add a bottom (or top) padding instead of taking the entire available space
- maxHeight (defaults to 275, to use when autoAdjustDropHeight is enabled)

Code

const columnDefinitions = [
  {
    id: 'isActive', name: 'Is Active', field: 'isActive',
    filterable: true,
    editor: {
      collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
      model: Editors.singleSelect,
      elementOptions: {
        // add any multiple-select.js options (from original or custom version)
        autoAdjustDropPosition: false, // by default set to True, but you can disable it
        position: 'top'
      }
    }
  }
];

Editor Options

Column Editor options

Some of the Editors could receive extra options, which is mostly the case for Editors using external dependencies (e.g. autocompleter, date, multipleSelect, ...) you can provide options via the editor options, for example

const columnDefinitions = [{
  id: 'start', name: 'Start Date', field: 'start',
  editor: {
    model: Editors.date,
    // previously known as `editorOptions` for < 9.0
    options: { displayDateMin: 'today' } as VanillaCalendarOption
  }
}];

Grid Option `defaultEditorOptions

You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the defaultEditorOptions Grid Option. Note that they are set via the editor type as a key name (autocompleter, date, ...) and then the content is the same as editor options (also note that each key is already typed with the correct editor option interface), for example

const gridOptions = {
  defaultEditorOptions: {
    autocompleter: { debounceWaitMs: 150 }, // typed as AutocompleterOption
    date: { displayDateMin: 'today' }, // typed as VanillaCalendarOption,
    longText: { cols: 50, rows: 5 }
  }
}

Validators

Each Editor needs to implement the validate() method which will be executed and validated before calling the save() method. Most Editor will simply validate that the value passed is correctly formed. The Float Editor is one of the more complex one and will first check if the number is a valid float then also check if minValue or maxValue was passed and if so validate against them. If any errors is found it will return an object of type EditorValidatorOutput (see the signature on top).

Custom Validator

If you want more complex validation then you can implement your own Custom Validator as long as it implements the following signature.

export type EditorValidator = (value: any, args?: EditorArgs) => EditorValidatorOutput;

So the value can be anything but the args is interesting since it provides multiple properties that you can hook into, which are the following

export interface EditorArgs {
  column: Column;
  container: any;
  grid: any;
  gridPosition: ElementPosition;
  item: any;
  position: ElementPosition;
  cancelChanges?: () => void;
  commitChanges?: () => void;
}

And finally the Validator Output has the following signature

export interface EditorValidatorOutput {
  valid: boolean;
  msg?: string | null;
}

So if we take all of these informations and we want to create our own Custom Editor to validate a Title field, we could create something like this:

const myCustomTitleValidator: EditorValidator = (value: any, args: EditorArgs) => {
  // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it
  const grid = args && args.grid;
  const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {};
  const i18n = gridOptions.i18n;

  if (value == null || value === undefined || !value.length) {
    return { valid: false, msg: 'This is a required field' };
  } else if (!/^Task\s\d+$/.test(value)) {
    return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number' };
    // OR use the Translate Service with your custom message
    // return { valid: false, msg: i18n.tr('YOUR_ERROR', { x: value }) };
  } else {
    return { valid: true, msg: '' };
  }
};

and use it in our Columns Definition like this:

const columnDefinition = [
  {
    id: 'title', name: 'Title', field: 'title',
    editor: {
      model: Editors.longText,
      validator: myCustomTitleValidator, // use our custom validator
    },
    onCellChange: (e: Event, args: OnEventArgs) => {
      // do something
      console.log(args.dataContext.title);
    }
  }
];

Disabling specific cell edit

With that in mind and the code from the SO answer, we end up with the following code.

View

import { SlickgridReactInstance, Column, GridOption } from 'slickgrid-react';

const Example: React.FC = () => {
  const [dataset, setDataset] = useState<any[]>([]);
  const [columns, setColumns] = useState<Column[]>([]);
  const [options, setOptions] = useState<GridOption | undefined>(undefined);
  const [isAutoEdit, setIsAutoEdit] = useState(false);
  const reactGridRef = useRef<SlickgridReactInstance | null>(null);

  useEffect(() => defineGrid(), []);

  function reactGridReady(reactGrid: SlickgridReactInstance) {
    reactGridRef.current = reactGrid;
  }

  /** Change dynamically `autoEdit` grid options */
  function setAutoEdit(isAutoEdit) {
    setIsAutoEdit(isAutoEdit);
    reactGridRef.current?.slickGrid.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
    return true;
  }

  render() {
    return (
      <SlickgridReact gridId="grid1"
        columns={columns}
        options={options}
        dataset={dataset}
        onReactGridCreated={$event => reactGridReady($event.detail)}
      />
    );
  }
}

Editors on Mobile Phone

If your grid uses the autoResize and you use Editors in your grid on a mobile phone, Android for example, you might have undesired behaviors. It might call a grid resize (and lose input focus) since the touch keyboard appears. This in term, is a bad user experience to your user, but there is a way to avoid this, you could use the pauseResizer

Component

const Example: React.FC = () => {
  function reactGridReady(reactGrid: SlickgridReactInstance) {
    reactGridRef.current = reactGrid;
  }

  function onAfterEditCell($event) {
    // resume autoResize feature,  and after leaving cell editing mode
    // force a resize to make sure the grid fits the current dimensions
    reactGridRef.current?.resizerService.pauseResizer(false);
    reactGridRef.current?.resizerService.resizeGrid();
  }

  function onBeforeEditCell($event) {
    reactGridRef.current?.resizerService.pauseResizer(true);
  }

    return !options ? null : (
      <SlickgridReact
          gridId='grid3'
          columns={columns}
          options={options}
          dataset={dataset}
          onReactGridCreated={e => { reactGridRef.current?Ready(e.detail); }}
          onBeforeEditCell={e => {onBeforeEditCell($event.detail.eventData, $event.detail.args)}}
          onBeforeCellEditorDestroy={e => {onAfterEditCell($event.detail.eventData, $event.detail.args)}}
          onCellChange={e => { onCellChanged(e.detail.eventData, e.detail.args); }}
          onClick={e => { onCellClicked(e.detail.eventData, e.detail.args); }}
          onValidationError={e => { onCellValidationError(e.detail.eventData, e.detail.args); }}
        />
    );
}

Turning individual rows into edit mode

Dynamically change Column Editor

You can dynamically change a column editor by taking advantage of the onBeforeEditCell event and change the editor just before the cell editor opens. However please note that the library keeps 2 references and you need to update both references as shown below.

With the code sample shown below, we are using an input checkbox to toggle the Editor between Editors.longText to Editors.text and vice/versa

function changeToInputTextEditor(checked: boolean) {
    setIsInputTextEditor(checked);
}

function handleOnBeforeEditCell(args: CustomEvent<OnBeforeEditCellEventArgs>) {
  const args = event?.detail?.args;
  const { grid, column } = args;
  column.editor.model = isInputTextEditor ? Editors.text : Editors.longText;
  column.editorClass = column.editor.model;
  return true;
}

PreviousCell Menu (Action Menu)NextAutocomplete

Last updated 3 days ago

Description

Required Grid Option

Demo

How to use Inline Editors

Perform an action After Inline Edit

Custom Inline Editor

How to prevent Editor from going to the next bottom cell?

OnClick Action Editor (icon click)

AutoComplete Editor

Select Editors

Editor Options (MultipleSelectOption interface)

Collection Async Load

Collection Label Prefix/Suffix

Collection Label Render HTML

multiple-select.js Options

Editor Options

Validators

Custom Validator

Disabling specific cell edit

Editors on Mobile Phone

Turning individual rows into edit mode

Dynamically change Column Editor

Description

Required Grid Option

Demo

How to use Inline Editors

Perform an action After Inline Edit

Custom Inline Editor

How to prevent Editor from going to the next bottom cell?

OnClick Action Editor (icon click)

AutoComplete Editor

Select Editors

Editor Options (MultipleSelectOption interface)

Collection Async Load

Collection Label Prefix/Suffix

Collection Label Render HTML

multiple-select.js Options

Editor Options

Validators

Custom Validator

Disabling specific cell edit

Editors on Mobile Phone

Turning individual rows into edit mode

Dynamically change Column Editor

Editor Options (`MultipleSelectOption` interface)

`multiple-select.js` Options

Editor Options (`MultipleSelectOption` interface)

`multiple-select.js` Options