AngularJS 1.0rc1 dataTables object source

by Shashi Kumar Nagulakonda

HTML

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid example 3: Editing</title>
  <link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css" type="text/css"/>
  <style>
    .cell-title {
      font-weight: bold;
    }

    .cell-effort-driven {
      text-align: center;
    }
  </style>
</head>
<body>
<div style="position:relative" ng-controller="Tester">
  <div style="width:380px;">
      <slickgridjs id="myGrid" style="width:100%;height:100px;" data="state.rows"></slickgridjs>
  </div>
    
    <button ng-click="dorand()">Set random number to duration column</button>
    <h6>Contents of Grid:</h6>
    <p>{{state.rows}}</p>
            
    <br>
</div>

    
<!--SCRIPTS BELOW-->

<script src="http://mleibman.github.com/SlickGrid/lib/firebugx.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script
src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>

<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.editors.js"></script>
<script...

CSS

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>

<script src="http://code.angularjs.org/angular-1.0.0rc1.js"></script>
<style>

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }
.ui-helper-hidden { display: none;}

JavaScript

var myApp = angular.module('myApp', []);

myApp.factory('global', function ($rootScope) {
   
    var state = {};
    state.rows = [{"duration":"3.14159"}];
    
    state.fn = {
        rand : function () {
            state.rows = [{"duration": Math.random().toString()}];
        }
    };

    return state;        
});

myApp.directive('slickgridjs', function() {
    
    return {
        require: '?ngModel',
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            
            var grid;
            var data = [];
            //SETUP GRID COLUMN HEADERS
            var columns = [{
                id: "title",
                name: "Title",
                field: "title",
                width: 120,
                cssClass: "cell-title",
                editor: Slick.Editors.Text},
            {
                id: "desc",
                name: "Description",
                field: "description",
                width: 100,
                editor: Slick.Editors.LongText},
            {
                id: "duration",
                name: "Duration",
                field: "duration",
                editor: Slick.Editors.Text},
            {
                id: "%",
                name: "% Complete",
                field: "percentComplete",
                width: 80,
                resizable: false,
                formatter: Slick.Formatters.PercentCompleteBar,
                editor: Slick.Editors.PercentComplete},
            ];

            //SETUP GRID OPTIONS
            var options = {
                editable: true,
                enableAddRow: true,
                enableCellNavigation: true,
                asyncEditorLoading: false,
                autoEdit: true
            };
            
            grid = new Slick.Grid("#myGrid", [], columns, options);
            grid.setSelectionModel(new Slick.CellSelectionModel());
            
           ...