Angular.js UI Grid

The UI grid was formerly known as ng-grid in AngularJS. It is purely based on the AngularJS library. It offers sorting, paging, filtering, exporting and many more features. UI grid has the ability to change header and cell content with custom templates. It provides column sorting in both ascending and descending order, it can bind sophisticated functionalities to cell values. It helps to filter and group data. It has expandable rows. You can use the UI grid in AngularJS applications by adding a reference file in your projects header section and including the script files in your pages.<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 

The script files to be added to the header section are given below.


<script src="http://ui-grid.info/release/ui-grid.js"></script>

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">


Then add the ui.grid module reference in the application and define the module as follows.


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

Let’s see an example of a UI grid. Here is the index file.Index.Html

<!Doctype Html>
<!-- Here Includes Module Name -->
<Html Ng-App="Ng4freeapp">
  <Head>
    <Title>Angular UI Grid | Example,Demo With Gridview In AngularUI</Title>
  <!-- Include Must Be AngularJS Lib Javascript -->
     <Script Src="Http://Ajax.Googleapis.Com/Ajax/Libs/Angularjs/1.2.26/Angular.Js"></Script>
    <Script Src="Http://Ajax.Googleapis.Com/Ajax/Libs/Angularjs/1.2.26/Angular-Touch.Js"></Script>
    <Script Src="Http://Ajax.Googleapis.Com/Ajax/Libs/Angularjs/1.2.26/Angular-Animate.Js"></Script>
    <Script Src="Http://Ui-Grid.Info/Docs/Grunt-Scripts/Vfs_fonts.Js"></Script>
    <Script Src="Http://Ui-Grid.Info/Release/Ui-Grid-Unstable.Js"></Script>
    <Link Rel="Stylesheet" Href="Http://Ui-Grid.Info/Release/Ui-Grid-Unstable.Css" Type="Text/Css">
    </Head>
  <Body>
<!-- Here Includes Controller -->
<Div Ng-Controller="TechieupgraderMainCtrl">
<Div Ui-Grid="{ Data: Data, ColumnDefs: ColumnDefs,EnableRowSelection: True,
    EnableSelectAll: True,
    EnableFiltering: True, }" Class="Grid" Ui-Grid-Selection Ui-Grid-Edit Ui-Grid-Cellnav></Div>
<Button Ng-Click="AddNewItem()" > ADD Item</Button>

</Div>
<!-- Custom Include Javascript App.Js File -->
    <Script Src="App.Js"></Script>
  </Body>
</Html>

App.Js file.
// Techieupgraderapp Its Used Module Name
Var App = Angular.Module('Techieupgraderapp', ['NgAnimate', 'NgTouch', 'Ui.Grid', 'Ui.Grid.Selection', 'Ui.Grid.Edit','Ui.Grid.CellNav']);

//TechieupgraderMainCtrl Its Used Controller Name
App.Controller('TechieupgraderMainCtrl', ['$Scope', Function ($Scope) {

//Some Records Of Json Using Loading Time
$Scope.Data = [
{ Name: 'Angular ', Title: 'Demo Angularjs',Lname: 'Gridview' ,Address: 'Char Us Road' ,City: 'USA' ,Status: 'Active'&Nbsp; },
{ Name: 'Test Add ', Title: 'Test Add',Lname: 'Test Add' ,Address: 'Test Add' ,City: 'Test Add' ,Status: 'Test Add'&Nbsp; }
];

//Create A Column Name
$Scope.ColumnDefs = [
{Name: 'Name', CellEditableCondition:true},
{Name: 'Title', CellEditableCondition:true},
{Name: 'Lname', CellEditableCondition:true},
{Name: 'Address', CellEditableCondition:true},
{Name: 'City', CellEditableCondition:true},
{Name: 'Status', CellEditableCondition:true}
];

$Scope.AddNewItem=Function()
{
$Scope.Data.Push( { Name: 'Test Add ', Title: 'Test Add',Lname: 'Test Add' ,Address: 'Test Add' ,City: 'Test Add' ,Status: 'Test Add'&Nbsp; });
};

$Scope.InsertNewItem=Function()
{
$Scope.Data.Splice(1, 0, { Name: 'Test Add ', Title: 'Test Add',Lname: 'Test Add' ,Address: 'Test Add' ,City: 'Test Add' ,Status: 'Test Add'&Nbsp; });
};
}]);