Setting up Ag-grid on AngularJS version 1.6 - A Comprehensive Guide

Question

Setting up Ag-grid on AngularJS version 1.6 - A Comprehensive Guide

I went through the tutorial to set up agGrid for AngularJS with TypeScript instead of JavaScript. Here's what I did:

npm install ag-grid
var AgGrid = require('ag-grid');
AgGrid.initialiseAgGridWithAngular1(angular);
var module = angular.module("example", ["agGrid"]);

After setting it up in my HTML, the grid was visible:

<div ag-grid="$ctrl.gridOptions" class="ag-theme-balham" style="height: 100%;"></div>

However, I noticed that the CSS wasn't showing up. https://i.sstatic.net/ZYzoe.png

To fix this, I tried adding some required CSS files:

require("ag-grid/dist/styles/ag-grid.css")
require("ag-grid/dist/styles/ag-theme-balham.css")    
var AgGrid = require('ag-grid');

Unfortunately, it still didn't work. Any suggestions? Thank you

angularjs typescript ag-grid

Answer 1

Answer №1

The basic theme has been a perfect fit for my needs. Here is the code snippet that I used:

    //**Layout Page**
    <link rel="stylesheet" href="~/Content/ag-grid.css">

    //If you're using the bundled version, you can reference the ag-Grid-Enterprise library via CDN
    <script src="_url_to_your_chosen_cdn_/ag-grid-enterprise.js"></script>

    //Load from Local 
    //<script src="node_modules/ag-grid/dist/ag-grid-enterprise.js"></script>

    <script type="text/javascript">
            // Update angular grid license key. If you are using Enterprise Version
            agGrid.LicenseManager.setLicenseKey("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
            // get ag-Grid to create an Angular module and register the ag-Grid directive
            agGrid.initialiseAgGridWithAngular1(angular);

            var app = angular.module("AppName", ["agGrid"]);            
    </script>

    //**View**
    <div ag-grid="agGridOptions" class="ag-theme-fresh" style="height: 400px;"></div>

    //**ControllerJS**
    $scope.agGridOptions = {
        angularCompileRows: true,
        columnDefs: columnDefs,
        rowData: rowData,
    }

Answer 2

The basic theme has been a perfect fit for my needs. Here is the code snippet that I used:

    //**Layout Page**
    <link rel="stylesheet" href="~/Content/ag-grid.css">

    //If you're using the bundled version, you can reference the ag-Grid-Enterprise library via CDN
    <script src="_url_to_your_chosen_cdn_/ag-grid-enterprise.js"></script>

    //Load from Local 
    //<script src="node_modules/ag-grid/dist/ag-grid-enterprise.js"></script>

    <script type="text/javascript">
            // Update angular grid license key. If you are using Enterprise Version
            agGrid.LicenseManager.setLicenseKey("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
            // get ag-Grid to create an Angular module and register the ag-Grid directive
            agGrid.initialiseAgGridWithAngular1(angular);

            var app = angular.module("AppName", ["agGrid"]);            
    </script>

    //**View**
    <div ag-grid="agGridOptions" class="ag-theme-fresh" style="height: 400px;"></div>

    //**ControllerJS**
    $scope.agGridOptions = {
        angularCompileRows: true,
        columnDefs: columnDefs,
        rowData: rowData,
    }

Answer 3

Answer №2

After thorough research through various sections of the official documentation, I have finally discovered how to effectively use it.

Here are the simple steps for easy implementation:

First, install the necessary dependency by running npm install ag-grid-community
In your app.ts file:
- Include the reference
```
var AgGrid = require('ag-grid-community');
```
- Initialize AgGrid with Angular 1
```
AgGrid.initializeAgGridWithAngular1(angular);
```
- Add it to the main module

In your class or component:

Import the Grid and GridOptions from "ag-grid-community":
```
import { Grid, GridOptions} from "ag-grid-community";
```
Also, don't forget to include the necessary styles (You can also add them to vendor.ts)

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

Now, you're ready to utilize your Grid!

Add this in your constructor

this.gridOptions = {
  columnDefs: this.createColumnDefs(),
  rowData: this.createRowData()
};
let eGridDiv:HTMLElement = <HTMLElement>document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

Create your content definitions

private createColumnDefs() {
    return [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];
}

private createRowData() {
    return [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];
}

Answer 4

After thorough research through various sections of the official documentation, I have finally discovered how to effectively use it.

Here are the simple steps for easy implementation:

First, install the necessary dependency by running npm install ag-grid-community
In your app.ts file:
- Include the reference
```
var AgGrid = require('ag-grid-community');
```
- Initialize AgGrid with Angular 1
```
AgGrid.initializeAgGridWithAngular1(angular);
```
- Add it to the main module

In your class or component:

Import the Grid and GridOptions from "ag-grid-community":
```
import { Grid, GridOptions} from "ag-grid-community";
```
Also, don't forget to include the necessary styles (You can also add them to vendor.ts)

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

Now, you're ready to utilize your Grid!

Add this in your constructor

this.gridOptions = {
  columnDefs: this.createColumnDefs(),
  rowData: this.createRowData()
};
let eGridDiv:HTMLElement = <HTMLElement>document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);

Create your content definitions

private createColumnDefs() {
    return [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];
}

private createRowData() {
    return [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];
}

Setting up Ag-grid on AngularJS version 1.6 - A Comprehensive Guide

Answer №1

Answer №2

Similar questions

What's the significance of the #/ symbol in a URL?

TypeScript: safely reassigning object properties for type safety

Is it possible to use line breaks to differentiate properties?

Issue: "contains method is not supported" in Ionic 2

Exploring the functionality of the `super()` method in TypeScript

Error: Oops! The super expression can't be anything other than null or a function in JavaScript/TypeScript

Ways to utilize the useRef method within the useContext hook while implementing Typescript

Retrieve JSON data upon refreshing the page

Implementing a directive within the compile function of another directive

Utilizing ng-grid to pass variables within cellTemplate

Utilizing Sharepoint Online SPFX Web parts with React: A guide to selecting scripts dynamically based on environment requirements

Using Angular and Laravel to display JSON data extracted from a MySQL database

Enhancing your AngularJs fullstack setup with ng-grid and compass integration

I successfully installed Angular CLI, but I'm encountering an error indicating that it is not recognized in the command prompt

Testing the existence of Angular routes: Verifying the presence of a specific route

Updating the view manually is necessary when using AngularJS $routeProvider and resolve feature

Challenges with CSRF tokens in Express

Struggling to fetch information with Angular HttpClient from an API that sends back a JSON response with an array

AngularJS case-insensitivity match not functioning as expected

Steps for retrieving the output of a sequelize query that is enclosed within a function