admin 管理员组

文章数量: 1086019

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
Share Improve this question edited Dec 2, 2020 at 7:14 theWellHopeErr 1,8721 gold badge10 silver badges23 bronze badges asked Dec 2, 2020 at 6:35 RitikaRitika 511 silver badge5 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

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:

本文标签： javascriptHow to apply autocomplete functionality to the cell of aggridStack Overflow

版权声明：本文标题：javascript - How to apply auto-complete functionality to the cell of ag-grid? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744067253a2527831.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。