Friday, 24 February 2017

Angular UI Grid Example

AngularJS Grid system

create a index.html page to include angular.js,angular-touch.js and angular-animate.js and also include css.
Now create a module(techieupgraderapp) this is a module name in angularjs application.then create a as a controller (techieupgraderMainCtrl) name in this app.
Last include file app.js it’s a main part of angularjs application.means custom js include in index.html page.
Gridview mostly used ui-grid in this angularjs application.

Example of Angular UI Grid (for table)

<!doctype html>
<!-- Here includes module name -->
<html ng-app="ng4freeapp">
    <title>Angular UI Grid | Example,demo with Gridview in AngularUI</title>
  <!-- Include Must be AngularJS lib Javascript -->
     <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="" type="text/css">
<!-- 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>

<!-- custom include Javascript app.js file -->
    <script src="app.js"></script>

Custom Logic File in include same path – > app.js
// 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
$ = [
{ 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}

$ { name: 'Test add ', title: 'Test add',lname: 'Test add' ,address: 'Test add' ,city: 'Test add' ,status: 'Test add'&nbsp; });

$, 0, { name: 'Test add ', title: 'Test add',lname: 'Test add' ,address: 'Test add' ,city: 'Test add' ,status: 'Test add'&nbsp; });