Getting started with angular-ui-grid

Download angular-ui-grid eBook

Remarks

This section provides an overview of what angular-ui-grid is, and why a developer might want to use it.

It should also mention any large subjects within angular-ui-grid, and link out to the related topics. Since the Documentation for angular-ui-grid is new, you may need to create initial versions of those related topics.

Creating a Simple Grid

Step 1 - Include the uiGrid in your project

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>
 

Step 2 - Add uiGrid module as a dependency to your app

var app = angular.module("myApp", ["ui-grid"]);
 

Step 3 - Data for the grid

$scope.myData = [
    {
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "firstName": "Jane",
        "lastName": "Doe"
    }
];
 

Step 4 - HTML Markup for the Grid

Use the ui-grid directive and pass in your scope property of myData .

<div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }"></div>
</div>
 

This should render a grid with two columns - First Name and Last Name.

It takes the keys of the first item of data array as column names and converts the camelCase style keys into proper words: "firstName" to "First Name".

Example on Plnkr

Installation or Setup

Requirements:

Supported Browsers:

  • IE9+
  • Chrome
  • Firefox
  • Safari 5+
  • Opera
  • Android 4

AngularJS

  • 1.4.0+

Getting Started

Download the source files from ui-grid github and include them in your project including the dependencies:

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>
 

At this point you should be able to use ui-grid.

Stats

34 Contributors: 3
Tuesday, February 14, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook