Auto-plete functionality needs to suggest function names which is in a json format and mentioned below:

{
 "id": 260,
 "title": "p_active(Power: number, PowerAngle: number)",
 "type": "PR",
 "category": "AL",
 "structure": "p_active(Power: number, PowerAngle: number)"
}

Here, p_active is a function name, which needs to be included in the suggestion.

Auto-plete functionality needs to suggest function names which is in a json format and mentioned below:

{
 "id": 260,
 "title": "p_active(Power: number, PowerAngle: number)",
 "type": "PR",
 "category": "AL",
 "structure": "p_active(Power: number, PowerAngle: number)"
}

Here, p_active is a function name, which needs to be included in the suggestion.

• javascript
• html
• angular
• ag-grid

3 Answers 3

I don't think ag-grid has support for autoplete out of the box, with that being said there are 2 possible solutions I can think of:

1. Create a custom Cell Renderer ponent. This allows you to customize your cell with any ponent however you want, in this case what you can do is have an input there with auto plete. More info about this: https://www.ag-grid./javascript-grid-cell-rendering-ponents/

2. Use a ready solution/package - here's a package I found: https://www.npmjs./package/ag-grid-autoplete-editor

Here's a stackblitz with the implementation of autoplete: https://stackblitz./edit/ag-grid-autoplete-editor

I'm using Material Autoplete with Angular. I wrap it in a class I created named AutopleteCellRendererComponent which implements AG Grid's ICellRendererAngularComp. It seems to work fairly well so far (I don't have all the kinks out yet). I would put the code here if there was anything weird, but it really is just a very straight forward wrapping of a Material Autoplete in an Angular ponent with this as the template:

<mat-form-field>
    <input type="text" matInput [matAutoplete]="auto" [formControl]="filterInput" panelWidth>
    <mat-autoplete
        #auto="matAutoplete"
        [panelWidth]="panelWidth"
    >
        <mat-option class="mat-row" *ngFor="let row of filteredRowData" [value]="getValue(row)">
            {{getText(row)}}
        </mat-option>

    </mat-autoplete>
</mat-form-field>

Then the AG Grid column def looks like this for showing an employee autoplete list in the AG Grid:

columnDefs: [
    {
      headerName: 'Employee',
      field: 'employee.name',
      cellRenderer: AutopleteCellRendererComponent,
      cellRendererParams: {
        autoplete: {
          source: this.employeeService.getAll(),
          formatter: this.formatEmployeeAutoplete,
          panelWidth: '320px'
        }
      }
    },

As a side note, if you happen to be showing the grid in an NgbModal, I had to add this to my stylesheet:

.cdk-overlay-container {
  z-index: 1056;
}

...otherwise the autoplete list shows up behind the modal.

For enterprise users, there is Rich Select Editor available which will give you autoplete funtionality by enabling allow-typing param. Please find documentation here:

https://www.ag-grid./javascript-data-grid/provided-cell-editors-rich-select/#allow-typing

Sample column definitions for it will look something like this (from the documentation)

columnDefs: [
{
    cellEditor: 'agRichSelectCellEditor',
    cellRenderer: ColourCellRenderer,
    cellEditorParams: {
        values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
        allowTyping: true,
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220
    }
    // ...other props
}

]

Screenshot from the official documentation: