I am using ag-grid for Angular 2. In that i have multiple headers like token number. It is not displaying completely. It is just like Token N...
Below is my component.ts
import { Component, OnInit } from '@angular/core';
import{ GridOptions } from 'ag-grid';
import { FlightProcessGridStatusComponent } from '../flight-process-grid-status/flight-process-grid-status.component';
import { FetchedFlightInfoBean } from '../../_model/FetchedFlightInfoBean';
@Component({
selector: 'app-user-home-child',
templateUrl: './user-home-child.component.html',
styleUrls: ['./user-home-child.component.css'],
//providers: [FetchedFlightInfoBean]
})
export class UserHomeChildComponent {
private gridOptions: GridOptions;
private refreshFlag: boolean;
fetchedFltBean: FetchedFlightInfoBean [] = [
{tokenNbr:1, flightNbr:"AY01", flightDate: "12-aug-17", flightBrPoint:"DEL", flightoffPoint:"LKO", nbrPax:2, okEmail:"Y", nonOkEmail:"N", okphn:"Y", nonOkPhn:"N", status:"WAIT"},
{tokenNbr:2, flightNbr:"AY02", flightDate: "6-aug-17", flightBrPoint:"BAN", flightoffPoint:"MUM", nbrPax:4, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"MISSED-CONNECTION"},
{tokenNbr:3, flightNbr:"AY013", flightDate: "22-aug-17", flightBrPoint:"HEL", flightoffPoint:"PAR", nbrPax:1, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"FLOWN"}
];
constructor() {
this.gridOptions = <GridOptions>{headerHeight: 48,
rowHeight: 35,
rowSelection: 'single',
enableColResize: true,
onGridReady: (params) => {
params.api.sizeColumnsToFit();
}
};
this.gridOptions.columnDefs = [
{headerName: 'Token Number', field: 'tokenNbr'},
{headerName: "Flight Number", field: "flightNbr"},
{headerName: "Flight Date", field: "flightDate"},
{headerName: "Flight Boarding Point", field: "flightBrPoint"},
{headerName: "Flight Off Point", field: "flightoffPoint"},
{headerName: "NBR of Pax", field: "nbrPax"},
{headerName: "Ok Email", field: "okEmail"},
{headerName: "NonOk Email", field: "nonOkEmail"},
{headerName: "Ok Phone", field: "okphn"},
{headerName: "NonOk Phone", field: "nonOkPhn"},
{
headerName: "Status",
field: "status",
cellRendererFramework: FlightProcessGridStatusComponent,
}
];
this.gridOptions.rowData = this.createRowData();
}
public refreshRowData()
{
this.refreshFlag = true;
alert(`inside refreshRowData`);
let rowData = this.createRowData();
this.gridOptions.api.setRowData(rowData);
}
private createRowData() {
if(this.refreshFlag)
{
alert(`refresh call`);
}
let rowData:FetchedFlightInfoBean[] = this.fetchedFltBean;
/* let rowDataLength = rowData.length;
alert(`${rowDataLength}`)
for (var i = 0; i < rowDataLength; i++) {
rowData.push({
tokenNbr: 1,
flightNbr: "",
flightDate: "",
flightBrPoint: "",
flightoffPoint: "",
nbrPax: 3,
okEmail: "",
nonOkEmail: "",
okphn: "",
nonOkPhn: "",
status: "",
});
}
*/
return rowData;
}
}
next is my html part....
<div style="width: 800px; padding-left: 100px" class="ag-fresh ag-header-cell-label">
<button (click)="refreshRowData()">Refresh Data</button>
<button (click)="autoFit()">AutoFit</button>
<ag-grid-angular style="width: 1000px; height: 1000px;"
[gridOptions]="gridOptions"
enableSorting
enableFilter >
</ag-grid-angular>
</div>
my CSS-
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
.ag-fresh {
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ag-fresh .ag-root {
border: none;
}
.ag-fresh .ag-header-container {
background: #fff;
}
.ag-fresh .ag-header {
border-bottom: 2px solid #000;
}
.ag-fresh .ag-header-row {
font-weight: bold;
font-size: 13px;
line-height: 1em;
color: #000;
background: #fff;
border: none;
}
.ag-fresh .ag-ltr .ag-header-cell {
padding: 10px;
border: none
}
.ag-fresh .ag-row {
border-bottom: 1px solid #ddd;
}
.ag-fresh .ag-row:nth-child(odd){
border-top: 1px solid #ddd;
background-color: #f9f9f9;
}
.ag-fresh .ag-row:last-child {
border-bottom: none;
}
.ag-fresh .ag-row:hover {
background-color: #d9edf7;
border-top: 1px solid #aaa;
border-color: #aaa;
}
.ag-fresh .ag-row .ag-cell {
color: #333;
padding: 10px 15px;
}
.ag-fresh .ag-row .ag-cell:focus,
.ag-fresh .ag-row .ag-cell:hover {
font-weight: bold;
background-color: #d0edf3 ;
color:#000;
}
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
In my component you can see I have fixed the size of the column using params.api.sizeColumnsToFit(). This allow my columns to display without a horizontal scroll bar. So i am getting complete data in one view.
But now my column-headers are not wraaping up there name. I am not getting the complete name displayed. For example, If the column-header is Token Number then only "token n..." this part is displayed.
Please help.
