最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Select with values and IDs inside an ag-grid cell? - Stack Overflow

programmeradmin2浏览0评论

I am very new to ag-grid and am evaluating it.

My project's data has multiple lookup tables (i.e. A Foo has a category of Bar, a Brand of Baz and a Class of Boo) that I would like to be able to edit in the ag-grid. Unfortunately, those lookup tables are not in my control and I do not always have sequential IDs.

Example:

Foo has a Class

Class can be one of the following:

  • ID - Value
  • 2 - Test
  • 3 - UAT
  • 6 - Unknown
  • 9 - Production
  • 15 - Development

I can't control the IDs or the Values.

So if I put in the agSelectCellEditor, can I somehow tell it to display the values, but collect the IDs?

Has someone else got a better idea on how I can collect the Class, Brand, etc?

ETA:

From the ag-grid site ():

colDef.cellEditor = 'agSelectCellEditor';
colDef.cellEditorParams = {
    values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}

This is what I've tried, but I can't get the IDs back out here. Maybe someone else has a better idea or has implemented this before.

Thank you for helping an ag-grid noob.

I am very new to ag-grid and am evaluating it.

My project's data has multiple lookup tables (i.e. A Foo has a category of Bar, a Brand of Baz and a Class of Boo) that I would like to be able to edit in the ag-grid. Unfortunately, those lookup tables are not in my control and I do not always have sequential IDs.

Example:

Foo has a Class

Class can be one of the following:

  • ID - Value
  • 2 - Test
  • 3 - UAT
  • 6 - Unknown
  • 9 - Production
  • 15 - Development

I can't control the IDs or the Values.

So if I put in the agSelectCellEditor, can I somehow tell it to display the values, but collect the IDs?

Has someone else got a better idea on how I can collect the Class, Brand, etc?

ETA:

From the ag-grid site (https://www.ag-grid./javascript-grid-cell-editing/#agselectcelleditor-agpopupselectcelleditor):

colDef.cellEditor = 'agSelectCellEditor';
colDef.cellEditorParams = {
    values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}

This is what I've tried, but I can't get the IDs back out here. Maybe someone else has a better idea or has implemented this before.

Thank you for helping an ag-grid noob.

Share Improve this question edited Mar 7, 2019 at 16:16 newbo asked Mar 7, 2019 at 16:03 newbonewbo 3032 silver badges9 bronze badges 3
  • please share sample code what you have tried or implemented – Naga Sai A Commented Mar 7, 2019 at 16:07
  • I haven't tried much--as I said, I'm evaluating the product. Ag-grid claims that they support the agSelectCellEditor, but they don't show values and IDs. Unfortunately, the pany "support" only links here, rather than to them. – newbo Commented Mar 7, 2019 at 16:11
  • Are you trying to access grid data , ?? ID means key value??? key values are nothing but the columnDefinitions – Naga Sai A Commented Mar 7, 2019 at 16:35
Add a ment  | 

1 Answer 1

Reset to default 8

You can do it by creating a custom cell editor.

Component:

drop.down.editor.ts

import {AfterViewInit, Component, ViewChild, ViewContainerRef} from "@angular/core";

import {ICellEditorAngularComp} from "ag-grid-angular";

@Component({
    selector: 'dropdown-cell-editor',
    templateUrl: "drop.down.editor.html"
})
export class DropDownEditor implements ICellEditorAngularComp, AfterViewInit {
    private params: any;
    public value: number;
    private options: any;

    @ViewChild('input', {read: ViewContainerRef}) public input;


    agInit(params: any): void {
        this.params = params;
        this.value = this.params.value;
        this.options = params.options;

    }

    getValue(): any {
        return this.value;
    }

    ngAfterViewInit() {
        window.setTimeout(() => {
            this.input.element.nativeElement.focus();
        })
    }

}

drop.down.editor.html

 <select  #input  [(ngModel)]="value">
   <option *ngFor="let item of options" value="{{item.value}}">{{item.name}}</option>
  </select>

then add the module declaration

@NgModule({
  imports:      [ ... , AgGridModule.withComponents( [DropDownEditor]) ],
  declarations: [ ..., DropDownEditor ]
})

then use it in the column definition

{
    headerName: "Drop down",
    field: "dropdown",
    cellEditorFramework: DropDownEditor,
    editable: true,
    cellEditorParams: {
        options: [{
                name: "First Option",
                value: 1
            },
            {
                name: "Second Option",
                value: 2
            }
        ]
    }
}

Full example here

发布评论

评论列表(0)

  1. 暂无评论