ag-grid cell renderer cell validation

Question

I tried for cell validations in the ag-grid cell renderer.

I am not able to achieve this.

The following is my code sample.

columns = [
                    { headerName: "Sequence", field: "domainDetailSeq", cellRendererFramework: GridInputComponent },
                    { headerName: "Detail Id", field: "domainDetailId", cellRendererFramework: GridInputComponent }
                ]

Here is the cell renderer component.

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular/main";

@Component({
    selector: 'child-cell',
    template: `<div fxLayout="row" class="grid-actions">
           <input required type="text" (blur)="invokeParentMethod($event)" [value]="params.value" [hidden]="params.data.createdBy && params.colDef.field==='domainDetailId'">
            <span [hidden]="!params.data.createdBy" *ngIf="params.colDef.field==='domainDetailId'">{{params.value}}</span>
        </div>`
})
export class GridInputComponent implements ICellRendererAngularComp {
    public params: any;

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

    public invokeParentMethod($event: MouseEvent, mode: string) {
        $event.preventDefault();
        this.params.context.componentParent.update(this.params, $event);
    }
}

I have a submit button on the main page, when clicked, I need to perform validations like required and show the required messages there.

Any suggestions will be appreciable.

Shivani Gajjar Shivani Gajjar · Accepted Answer · 2019-02-15T12:05:41

You can achieve using cellClassRules property in grid field:

configuration.cellClassRules:{'required-class':(params)=>{return <condition>}}

ag-grid cell renderer cell validation

1 Answers