Customised Header in Ag Grid Angular
Posted By : Avilash Choudhary | 27-Dec-2017
Hi Guys, Today we are going to explore the Ag grid features. Ag grid is a library with lots of features, it's customisable, you can modify according to your needs, It has features like sorting, filtering, hide show columns, move columns, you can dynamic columns, it provides the full row editable feature or single cell editable. you can copy one cell data to another. It provides infinite scrolling, which is really smooth, you can scroll and data will be fetched from the server and new rows will be added to the bottom.
For customised header, You have to create a separate angular component and provide data to that component.
For that you have to provide headerComponentFramework and headerComponentParams in column definition of ag grid.
const staffingLevelTableColumnDefs = [ { width: 200, headerName: "From", field: "from", cellEditorFramework: NumberCellEditorComponent, cellEditorParams: { focus: true }, headerComponentFramework: StaffingLevelCustomHeaderComponent, headerComponentParams: { showCheckbox: false, columnName: "From", colField: "from" } }, { width: 200, headerName: 'To', field: "to", cellEditorFramework: NumberCellEditorComponent, cellEditorParams: { focus: true }, headerComponentFramework: StaffingLevelCustomHeaderComponent, headerComponentParams: { showCheckbox: false, columnName: "To", colField: "to" } }];
Your Header component should be like this:
import { ShiftStaffingLevelComponent } from './../shift-staffing-level/shift-staffing-level.component';
import { Component, OnInit } from '@angular/core';
import { IHeaderAngularComp } from "ag-grid-angular/main";
@Component({
selector: 'ka-shift-staffing-level-custom-header',
templateUrl: 'staffing-level-custom-header.component.html',
styleUrls: ['staffing-level-custom-header.component.scss']
})
export class StaffingLevelCustomHeaderComponent implements IHeaderAngularComp {
public parentComponentRef: ShiftStaffingLevelComponent;
public showCheckbox:boolean;
public columnName:boolean;
public colField:string;
public colDuration:number;
public checkboxSelected:boolean = false;
agInit(params): void {
this.parentComponentRef = params.column.gridOptionsWrapper.gridOptions.context.componentParent;
}
}
That component that you have provided to HeaderComponentFramework will have agInit method. this method will be called when that header component initialised. it will have the params of ag grid.
You can provide data to header component through headerComponentParams. Suppose you have to update the header when grid cell data changed. you can do it will below code:
const newGridOptions = {
enableRangeSelection: true,
// rowData: undefined,
onRangeSelectionChanged: this.onRangeSelectionChanged.bind(this),
onCellEditingStopped: params => {
let colDef = params.colDef;
let columnField = colDef.field;
setTimeout(() => {
params.colDef.headerComponentParams.colDuration = this.shiftStaffingLevelService.staffingLevelColumnDuration;
params.colDef.headerComponentParams.checkboxSelected = this.checkedColumnsData[columnField];
this.staffingLevelTableGridOptions.api.refreshHeader();
}, 0);
},
context: {
componentParent: this
}
};
You have onCellEditingStopped callback method, whenever user stop editing, this will be called. after changing the header params, you have to call refreshHeader method to update the header of grid.
In your HeaderComponent you can create html according to your needs and provide data through params.
One important thing to consider, In your modules file, you have to pass your header component into AgGridModule.withComponents list.
AgGridModule.withComponents([
StaffingLevelCustomHeaderComponent
])
There are so many features ag grid provides. This is one of them.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avilash Choudhary
Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.