2

I am trying to use ag-grid for one of my project work and was trying to configure it with webpack & Angular 1.6

i have configured it as follow

Module

var agGrid = require('ag-grid');
agGrid.initialiseAgGridWithAngular1(angular);

module.exports = angular.module('transModule', ['agGrid'])
.component('transComponent', transComponent)
.name;

Controller

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

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

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

html

<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>

but when i use i, it displays as follow table view

then i tried adding the stylesheets as follow

require('ag-grid/dist/styles/ag-grid.css'); require('ag-grid/dist/styles/theme-fresh.css');

yet again it the table want render properly and it will show as follow

enter image description here

is there anything um missing?? I would much appreciate if you could give me some headsup??

Dark99
  • 81
  • 3
  • 11
  • Having the same issue, did you find out why? – Duane Feb 09 '18 at 19:46
  • @Duane sorry i couldn't find a viable solution for this, I am now using Angular UI-Grid as an alternative – Dark99 Feb 12 '18 at 09:40
  • 1
    I got it to work by applying this, but using ag-grid instead of Font Awesome. https://charlouze.github.io/ionic/2017/05/31/Ionic-3-and-Font-Awesome.html – Duane Feb 12 '18 at 19:19

1 Answers1

1

I noticed in ag-grid's package.json it was referenced main.js as entry point, and I actually found the whole lib folder content loaded in the Source tab of Chrome DevTools.

This was due to the way I was requiring ag-grid:

var agGrid = require('ag-grid');
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);

var myApp = 'myApp';
module.exports = myApp;

angular
  .module(myApp, [
    'agGrid'
  ])

Even if the "get-started" docs don't list a Webpack based solution, they do say to include the dist/ag-grid.js file or one of the minified/noStyle versions, so I changed the first line like this:

var agGrid = require('ag-grid/dist/ag-grid.min.js');
Gargaroz
  • 313
  • 9
  • 28