Custom Autocomplete Editor for Cheetah Grid

[olajoke]

I am trying to implement an autocomplete editor for a column in Cheetah Grid, but I have encountered significant difficulties. My goal is to provide users with a dropdown of suggestions as they type in a cell, similar to the autocomplete experience in spreadsheet software.

What I’ve Tried

I attempted to extend InlineInputEditor and override onInputCellInternal to add a suggestion dropdown. I also tried implementing the editor interface directly. However, Cheetah Grid expects the action property to be an instance of a class with specific methods (like bindGridEvent), and direct implementation led to errors. I ensured that the column is set as editable and of type text, and that the action is an instance of my custom editor.

Despite these efforts, the custom autocomplete UI does not activate, and the grid does not properly invoke the editor. I suspect there may be internal limitations or undocumented requirements for custom editors.

Questions

1. Is it possible to extend InlineInputEditor or SmallDialogInputEditor to create a fully custom editor (such as an autocomplete input) that works seamlessly with Cheetah Grid’s editing system? If so, are there any examples or documentation for doing this?
2. Are there required methods or patterns that must be followed for the editor to be recognised and invoked by the grid?
3. Would you consider adding a built-in or officially supported autocomplete editor/column to Cheetah Grid?
4. To contribute, are there any guidelines for implementing a new column type or editor?
5. Alternatively, is it possible to create a standalone autocomplete column constructor (similar to MenuColumn or CheckColumn) that can be used in the column definition?

Example Use Case:

columns: [
  {
    field: 'category',
    caption: 'Category',
    width: 150,
    columnType: 'autocomplete',
    action: new AutocompleteEditor({
      autocompleteOptions: ['Electronics', 'Clothing', 'Books', 'Food', 'Sports']
    })
  }
]

Thank you for your time and for the excellent work on Cheetah Grid!

[ota-meshi]

I have implemented the Autocomplete Column at my company, but we cannot make it public because it is heavily dependent on the company's internal framework.

To share with you just the outline, we created an original class that inherits cheetahGrid.columns.action.InlineInputEditor and placed my own input using onInputCellInternal, onOpenCellInternal, etc.
The rectangle in which the input is placed is obtained by grid.getAttachCellsArea().

For example:

      const { element, rect } = grid.getAttachCellsArea(
        grid.getCellRange(col, row)
      )
      input.style.top = `${rect.top.toFixed()}px`
      input.style.left = `${rect.left.toFixed()}px`
      input.style.width = `${rect.width.toFixed()}px`
      input.style.height = `${rect.height.toFixed()}px`
      element.appendChild(input)
      input.style.font = grid.font || '16px sans-serif'
      input.focus()
      input.value = inputValue || ''

Just assign an instance of your class to the action property of a column and it will start working.

To contribute, are there any guidelines for implementing a new column type or editor?

There are currently no guides for creating it 😓

Would you consider adding a built-in or officially supported autocomplete editor/column to Cheetah Grid?

That would be great if it could be done, but I think it would be very difficult to design an AutocompleteColumn that everyone would want 😓