CODEWITHSUNDEEP
ag-gridag-grid-ng2
Roaders
Roaders

Reputation: 4525

Copied the sample ag-grid example and have cells rendering on top of each other

I am experimenting with ag-grid and trying to get some very simple examples working. So far I am not having much luck.

I created a brand new app using ng new gridTest then I tried to follow these instructions.

The sample site I created is here.

My resulting grid looks like this:

enter image description here

app.component.html:

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-theme-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  public rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ]

  public columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
  ]
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AgGridModule } from 'ag-grid-angular/main';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

What am I doing wrong? I can't see how I messed up styles or anything with this very simple example...

Upvotes: 1

Views: 576

Answers (1)

Roaders
Roaders

Reputation: 4525

It turns out that the problems here were mostly style related. The fixed app can be seen here.

To get the grid I had to add the correct ag-grid styles into the angular-cli.json file:

  "styles": [
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/theme-fresh.css"
  ]

I had to change the grid div to point to the correct style name:

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs"
</ag-grid-angular>

and to get the columns to display nicely I had to add an event listener:

<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)">
</ag-grid-angular>

and a handler:

  public onGridReady(params: any){
    params.api.sizeColumnsToFit();
  }

The ag-grid documentation mostly relies on you cloning a git-hub repo and running that. Where I work we can't access github and we only have limited access to npm so I had to try and add the grid to an existing project. There is no documentation that has what steps you need to do when you take this approach.

Upvotes: 1

Related Questions