CODEWITHSUNDEEP
javascripthtmlangularjsag-grid
Mawg
Mawg

Reputation: 40140

Ag-grid with AngularJS - header width is not aligning with data columns

[Update] I will add an additional 200 points (total 300) if anyone gets my snippet working, with headers and data columns aligned.

This is my first attempt with ag-grid. I assign the grid header like this: 

var stationAnalyticsColumnDefs = [
    {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
    {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
    {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
    {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

I am fetching the data by AJAX, so when my $http.get returns success, accoding to the docs, I should be able to 

$scope.stationAnalyticsGridOptions.api.refreshView();

or 

$scope.stationAnalyticsGridOptions.api.refreshRows(data);

but neither of those seems to work (no data is shown), so I use 

$scope.stationAnalyticsGridOptions.api.setRowData(data);

and the data shows just fine.

My problem is that the headers don't align with the data. How do I do that? I also want the grid columns to resize as I drag the headers to resize them.

enter image description here

[Update] Still working on the Plunk. Can anyone see what's wrong with this?

View

<div ag-grid="stationAnalyticsGridOptions" 
     class="ag-fresh ag-basic" 
     style="height:400px; width:80%">

Controller

var stationAnalyticsColumnDefs = [
   {headerName: "Station #", field: "station_id",   width: 150, sort: 'asc'},
   {headerName: "Station name",   field: "station_name", width: 150, sort: 'desc'},
   {headerName: "Total visitors",   field: "total_visit_count", width: 150, sort: 'desc'},
   {headerName: "Busiest day (visitors)",   valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];

$scope.stationAnalyticsGridOptions = {
    columnDefs: stationAnalyticsColumnDefs,
    rowData: $scope.eventStationsAnalyticData,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
};

[Update] I tried to create a working Fiddle, to reproduce the question, but failed; the table does not even display. You can find the Fiddle at https://jsfiddle.net/mawg/9ex225ye/4/

Can anyone get it working - with the header width and data column width aligning?

Please fork my Fiddle, rather than starting from scratch, and retain the variable names, etc

Upvotes: 3

Views: 2327

Answers (1)

lin
lin

Reputation: 18392

Try setup your gridOptions including angularComileHeader: true to ensure your headers does work with AngularJS in the right way. Please check this runnable plnkr and compare it with your solution. Also ensure you using the latest version of ag-grid.

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: $scope.rowData,
  angularCompileHeaders: true,
  enableColResize: true,
  enableSorting: true,
  enableFilter: true
};

Upvotes: 4

Related Questions