fosterhoff-ag-grid-autocomplete-editor

ag-grid-autocomplete-editor

Quick implementation of autocompletion into ag-Grid cell using autocompleter package.

Install

npm install --save ag-grid-autocomplete-editor

Description

The goal of this package is to provide an easy way to have autocompleted cellEditor into ag-Grid.

Demo

Usage

This package provide a new cellEditor named: AutocompleteSelectCellEditor. You can configure and customize the cell and behavior with the following cellEditorParams:

• selectData: is a list of data matching the type {value: string, label: string, group?: string}. Or a function type: ((params: IAutocompleteSelectCellEditorParams) => Array<DataFormat>). If no other parameters provided the autcompletion will use this data with a simple .filter. Basically, if you already have local data, you probably don't need anything else.
• placeholder: the placeholder is a string who will be put onto the input field.
• required: (boolean = false) To know if editor should cancel change if the value is undefined (no selection made).
• autocomplete: please see autocompleter for more details about the following parameters
  • render: (same as classical autocompleter) function, except that it take the current cellEditor as first parameter.
  • renderGroup: (same as classical autocompleter) function, except that it take the current cellEditor as first parameter.
  • className: (same as classical autocompleter) default 'ag-cell-editor-autocomplete'
  • minLength: (same as classical autocompleter) default 1. User has to edit the input to trigger data fetch. Which means if minLength = 0 and used with fetch, user has to delete input value to be able to show the list. If you just want to show list on focus without any editing action, use showOnFocus instead.
  • showOnFocus: (same as classical autocompleter) default false trigger first fetch call when input is focused
  • emptyMsg: (same as classical autocompleter) default 'None'
  • strict: ( decide if the user can put free text or not) default true.
  • autoselectfirst: (decide the default behavior of the select (if the first row must be automatically selected or not)): default true
  • onFreeTextSelect: (function called only if the selected text does not exist on the actual select options. Must be use with strict=false): optional Must be use with strict=false.
  • onSelect: (same as classical autocompleter) function, except that it take the current cellEditor as first parameter.
  • fetch: (same as classical autocompleter) function, except that it take the current cellEditor as first parameter.
  • debounceWaitMs: (same as classical autocompleter) default 200
  • customize: (same as classical autocompleter) function, except that it take the current cellEditor as first parameter.
• ... all the classical arguments taken by a ag-Grid cellEditor.

Example

Simple autocompletion from datasource

import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/dist/main.css';
...
{
   headerName: "Already present data selector",
   field: "data",
   cellEditor: AutocompleteSelectCellEditor,
   cellEditorParams: {
       selectData: [
           { label: 'Canada', value: 'CA', group: 'North America' },
           { label: 'United States', value: 'US', group: 'North America' },
           { label: 'Uzbekistan', value: 'UZ', group: 'Asia' },
       ],
       placeholder: 'Select an option',
   },
   valueFormatter: (params) => {
       if (params.value) {
           return params.value.label || params.value.value || params.value;
       }
       return "";
   },
   editable: true,
}

Autocompletion with Ajax request

import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/dist/main.css';
...
{
   headerName: "Autocomplete with API Country based",
   field: "data",
   cellEditor: AutocompleteSelectCellEditor,
   cellEditorParams: {
       autocomplete: {
           fetch: (cellEditor, text, update) => {
                   let match = text.toLowerCase() || cellEditor.eInput.value.toLowerCase();
                   let xmlHttp = new XMLHttpRequest();
                   xmlHttp.onreadystatechange = () => {
                       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                           let data = JSON.parse(xmlHttp.responseText);
                           let items = data.map(d => ({ value: d.numericCode, label: d.name, group: d.region }));
                           update(items);
                       }
                       if (xmlHttp.status === 404) {
                           update(false);
                       }
                   };
                   xmlHttp.open("GET", `https://restcountries.eu/rest/v2/name/${match}`, true);
                   xmlHttp.send(null);
           },
       }
       placeholder: 'Select a Country',
   },
   valueFormatter: (params) => {
       if (params.value) {
           return params.value.label || params.value.value || params.value;
       }
       return "";
   },
   editable: true,
}

Simple autocompletion who allow user to enter any text

import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/dist/main.css';
...
{
   headerName: "Already present data selector",
   field: "data",
   cellEditor: AutocompleteSelectCellEditor,
   cellEditorParams: {
       selectData: [
           { label: 'Canada', value: 'CA', group: 'North America' },
           { label: 'United States', value: 'US', group: 'North America' },
           { label: 'Uzbekistan', value: 'UZ', group: 'Asia' },
       ],
       placeholder: 'Select an option',
       autocomplete: {
           strict: false,
           autoselectfirst: false,
       }
   },
   valueFormatter: (params) => {
       if (params.value) {
           return params.value.label || params.value.value || params.value;
       }
       return "";
   },
   editable: true,
}

Dependencies

• ag-Grid

Thank's to

• Thank's to ag-grid-auto-complete who was aiming AngularJS and was inspirational source for this package.
• Thank's to autocompleter for the easy and really customizable autocompletion logic.
• Thank's to ag-Grid for the great ag-Grid package.

LICENSE

This project is onto MIT license see LICENSE file.