I am using Ag Grid Enterprise version. I have below requirements.
1) I have 3 columns. All the 3 columns are drop down fields. Based on the selection of the value in first column, I have to make second and third column in a particular row to be editable or Non Editable dynamically.
2) An object which contains the list of all the visible rows from the grid. Even if i add a new row, I should be getting that new row as part of the list
Can anyone please let me know how can i achieve it ?
Regarding your first requirement: Each colDef has a property colDef.editable which can be a boolean or, in your case, a callback function:
colDef.editable = function(params) {
// params contains the following properties:
// params.node
// params.column
// params.colDef
return true; // apply your criteria based on params;
}
Here I have considered a scenario of having a grid with two columns Option and Year which are dropdowns. Option dropdown contains values 1,2 and 3 and Year dropdown years from 1990-1995. When value 1 is selected from Option dropdown, it will not allow you to change the year.
app.component.html
<div style="text-align:center">
ag-grid Example
</div>
<app-grid></app-grid>
grid.component.html
<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
grid.component.cs
Column definitions of the grid is set by making the editable: true and for each column definition, separate components are bind as cell editor and cell renderer.
import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { OptionsCellRendererComponent } from './options-cell-renderer/options-cell-renderer.component';
import { OptionsCellEditorComponent } from './options-cell-editor/options-cell-editor.component';
import { YearCellRendererComponent } from './year-cell-renderer/year-cell-renderer.component';
import { YearCellEditorComponent } from './year-cell-editor/year-cell-editor.component';
@Component({
selector: 'app-grid',
templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit {
gridOptions: GridOptions;
constructor() { }
ngOnInit() {
this.gridOptions = {
} as GridOptions;
}
onGridReady(params) {
this.setData();
}
setData() {
this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
this.gridOptions.api.setRowData(this.getData());
}
getColumnDefinitions(): any {
return [
{
field: 'option',
headerName: 'Option',
cellRendererFramework: OptionsCellRendererComponent,
cellEditorFramework: OptionsCellEditorComponent,
editable: true,
singleClickEdit: true,
},
{
field: 'year',
headerName: 'Year',
cellRendererFramework: YearCellRendererComponent,
cellEditorFramework: YearCellEditorComponent,
editable: true,
singleClickEdit: true,
},
]
}
getData(): any {
return [
{
option: '1',
year: 1990
},
{
option: '2',
year: 1991
}
];
}
}
options-cell-editor.component.html
Cell editor component for Option column with a dropdown of values 1,2,3
<div>
<select style="height: 20px; width: 180px;" [(ngModel)]="selectedOption">
<option value=1> 1</option>
<option value=2> 2</option>
<option value=3> 3</option>
</select>
</div>
options-cell-editor.component.ts
when option value is changed, pass it to the option-cell-renderer through getValue()
import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-options-cell-editor',
templateUrl: './options-cell-editor.component.html',
styleUrls: ['./options-cell-editor.component.css']
})
export class OptionsCellEditorComponent implements ICellEditorAngularComp {
selectedOption = 0;
getValue(): number {
return this.selectedOption;
}
isPopup?(): boolean {
return true;
}
agInit(params: any): void {
this.selectedOption = params.value;
}
}
options-cell-renderer.component.html
Showcase the value of the option
<div>{{option}}</div>
options-cell-renderer.component.ts
params.value will pass the value bind to this column from the grid rowdata. In this case the value of the 'option' property and bind it to the UI.
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-options-cell-renderer',
templateUrl: './options-cell-renderer.component.html',
styleUrls: ['./options-cell-renderer.component.css']
})
export class OptionsCellRendererComponent implements ICellRendererAngularComp {
public params: any;
option: string;
agInit(params: any): void {
this.params = params;
this.option = params.value;
}
refresh(): boolean {
return false;
}
constructor() { }
}
year-cell-editor.component.html
Cell editor component for Year column with a dropdown of years 1990-1995
<div>
<select style="height: 20px; width: 180px;" [(ngModel)]="selectedYear">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>
</div>
year-cell-editor.component.ts
user is allowed to change the year if the option selected is not 1. This is handled by isCancelBeforeStart method.
import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-year-cell-editor',
templateUrl: './year-cell-editor.component.html',
styleUrls: ['./year-cell-editor.component.css']
})
export class YearCellEditorComponent implements ICellEditorAngularComp {
selectedYear: number;
params: any;
constructor() { }
getValue() {
return this.selectedYear;
}
isPopup?(): boolean {
return false;
}
isCancelBeforeStart?(): boolean {
return this.params.data.option === '1';
}
agInit(params): void {
this.params = params;
this.selectedYear = params.value;
}
}
year-cell-renderer.component.html
Showcase the value of the selected year
<div>{{year}}</div>
year-cell-renderer.component.ts
params.value will pass the value bind to this column from the grid rowdata. In this case the value of the 'year' property and bind it to the UI.
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
@Component({
selector: 'app-year-cell-renderer',
templateUrl: './year-cell-renderer.component.html',
styleUrls: ['./year-cell-renderer.component.css']
})
export class YearCellRendererComponent implements ICellRendererAngularComp {
year: number;
constructor() { }
refresh(params: any): boolean {
return false;
}
agInit(params): void {
this.year = params.value;
}
}
app.module.ts
Register the grid custom cell components
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { AppComponent } from './app.component';
import { GridComponent } from './grid/grid.component';
import { OptionsCellEditorComponent } from './grid/options-cell-editor/options-cell-editor.component';
import { OptionsCellRendererComponent } from './grid/options-cell-renderer/options-cell-renderer.component';
import { YearCellEditorComponent } from './grid/year-cell-editor/year-cell-editor.component';
import { YearCellRendererComponent } from './grid/year-cell-renderer/year-cell-renderer.component';
@NgModule({
declarations: [
AppComponent,
GridComponent,
OptionsCellRendererComponent,
OptionsCellEditorComponent,
YearCellEditorComponent,
YearCellRendererComponent
],
imports: [
BrowserModule,
FormsModule,
CommonModule,
AgGridModule.withComponents([
OptionsCellEditorComponent,
OptionsCellRendererComponent,
YearCellEditorComponent,
YearCellRendererComponent
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
