Inline cell editing ag-grid isnt working for dropdown and datepicker

Question

I have implemented inline cell editing dropdown ,textbox and datepicker in ag-grid using angular 7 application. I have noticed that the cellValueChanged event is firing whenever I select a value from the drop down or datepicker but the changed values aren't getting updated. It only the textbox control values getting updated. Could somebody tell me what the problem is ?

html

<div class="card" *ngIf="DocumentUploadDetails && DocumentUploadDetails.DocumentEntities" style="margin-top: 10px">
    <div class="card-body" style="width:100%; text-align: left;">
        <div style="overflow-x: hidden; overflow-y: hidden; ">
            <div class="form-group row">
                <div class="panel panel-default col-md-12  ">
                    <div class="panel-body">
                        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100"
                            style="float: left;">
                            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions"
                                style="width: 100%; height: 100%" [columnDefs]="ColumnDefs" rowHeight="30"
                                [components]="components" [rowData]="DocumentUploadDetails.DocumentEntities"
                                [editType]="editType" (cellClicked)="onCellClicked($event)"
                                (cellValueChanged)="onCellValueChanged($event)" headerHeight="30" rowSelection="single">
                            </ag-grid-angular>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

component

 private setColumns() {
            const self = this;
            this.ColumnDefs.push({ headerName: 'ID', field: 'DocumentId', hide: true, editable: false });
            this.ColumnDefs.push({ headerName: 'Document Type ID', field: 'DocumentTypeId', hide: true, editable: true });
            this.ColumnDefs.push({
                headerName: 'Type', field: 'DocumentTypeName', hide: false, editable: true, cellEditor: 'agSelectCellEditor',
                cellEditorParams: {
                    values: this.DocumentTypesForDropDown
                }
            });
            this.ColumnDefs.push({ headerName: 'Document', field: 'DocumentName', hide: false, editable: true });
            this.ColumnDefs.push({ headerName: 'Document Date', field: 'DocumentDate', hide: false, editable: true, cellEditor: 'datePicker' });
            this.ColumnDefs.push(
                {
                    cellRenderer: function (p) {

                        if (p.node.data && p.node.data.DocumentId) {
                            const eSpan = self.getDeleteSpan();
                            eSpan.addEventListener('click', function () {
                                const self2 = self;
                                self2.Delete(p.node.data.DocumentId);
                            });
                            return eSpan;
                        }
                        else {
                            return '';
                        }
                    }, comparator: this.comparator.StringComparator, width: 50, cellStyle: { textAlign: 'center' }, cellClass: 'align-center', headerName: "Delete", pinned: 'right'

                });

            this.components = { datePicker: getDatePicker() };
        }


        onCellValueChanged(params) {
            console.log('onCellValueChanged fired');
            console.log('DocumentTypeId =' + params.data.DocumentTypeId);
            this.document = <IDocument>{
                id: params.data.DocumentId,
                name: params.data.DocumentName,
                documentTypeId: params.data.DocumentTypeId,
                documentDate: new Date(this.datepipe.transform(params.data.DocumentDate, 'yyyy-MM-dd')),
            };

            this.documentUploadService
                .updateDocumentUpload(this.document)
                .then((result) => {
                    if (result) {

                        this.notify.success('Documents uploaded successfully');
                    }
                }).catch(err => {
                    this.notify.error('An Error Has Occured While uploading the documents');
                });
        }



 public getDocumentTypes() {
        this.documentUploadService.getDocumentTypes()
            .subscribe(data => {
                this.DocumentTypes = data;
                this.DocumentTypesForDropDown = this.DocumentTypes.map(x => x.Name);
            },
                err => {
                    this.Error = 'An error has occurred. Please contact BSG';
                },
                () => {
                });

    }

What i have noticed with the datepicker is that value is changed only when i click the same cell after editing — Tom
The dropdown editing doesnt work at all. The cellvalue change triggers but there is no change in the documentTypeId value — Tom

ahmeticat ahmeticat · Accepted Answer · 2019-07-19T11:42:00

For DatePicker

You should initialize your components property where your constructor of component.

constructor(...){
   ....
   this.components = { datePicker: getDatePicker() };
}

and remove this line in setColumns() function

For Dropdown

Create the list of dropdown values for example

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

...

this.sports = data.map(a=>a.sport).filter(onlyUnique);

and set columnDefs like that

{
    headerName: "Sport",
    field: "sport",
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
       values: this.sports
    },
    editable:true
},

example

Inline cell editing ag-grid isnt working for dropdown and datepicker

1 Answers