angular-ui-grid Getting started with angular-ui-grid
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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Brelease%2Fui-grid.min.css%26quot%3B%2F%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Frelease%2Fui-grid.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> 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".
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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Brelease%2Fui-grid.min.css%26quot%3B%2F%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Frelease%2Fui-grid.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> At this point you should be able to use ui-grid.
