Ui Grid Example

by Paco86

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
    <link href="style.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet" />
    <link href="node_modules/angular-ui-grid/ui-grid.css" rel="stylesheet" />

</head>
<body 
      ng-app="app"
      style="margin-top: 200px; 1margin-left: 200px;" ng-controller="ctrl">

    <button ng-click="getRows()">Get Rows</button>
    <button ng-click="toggleFiltering()">Toggle Filtering</button>

    <br />
    <br />

    <div ui-grid="gridOptions" 
         ui-grid-edit
         ui-grid-cellnav
         ui-grid-move-columns
         ui-grid-resize-columns
         class="grid"></div>
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
    <script src="node_modules/angular-ui-grid/ui-grid.js"></script>


    <script src="app.js"></script>

</body>
</html>

CSS

.multitag-container {
    border: 1px solid grey;
    padding: 5px;
}


.tag1 {
    border: 1px solid red;
    margin: 5px;
    display: inline-block;
    padding: 5px;
}


.tag-input {
    padding: 0;
    margin: 0;
    border: 0;
    height: 100%;
    width: 100%;
}

.tag-input:focus {
    outline: none;
}

tr, td {
    height: 40px !important;
    padding: 0 !important;
}

JavaScript

angular.module("app", [
    'ui.grid',
    'ui.grid.edit',
    'ui.grid.cellNav',
    'ui.grid.moveColumns',
    'ui.grid.resizeColumns'
]);

angular.module("app").controller("ctrl", function ($scope, uiGridConstants, $timeout) {

    var data = [
      {
          "firstName": "Cox",
          "lastName": "Carney",
          "company": "Enormo",
          "employed": true
      },
      {
          "firstName": "Lorraine",
          "lastName": "Wise",
          "company": "Comveyer",
          "employed": false
      },
      {
          "firstName": "Nancy",
          "lastName": "Waters",
          "company": "Fuelton",
          "employed": false
      }
    ];

    $scope.gridOptions = {
        enableGridMenu: true,
        enableCellEditOnFocus: true,
        enableFiltering: false,
        enableHorizontalScrollbar: false,
        columnDefs: [
                      { name: 'firstName', enableCellEdit: true, width: 100 },
                      { name: 'lastName', enableCellEdit: true, width: 100 },
                      { name: 'company', enableCellEdit: true, width: 100 },
                    ]
    };

    $scope.gridOptions.data = data;

    var changedRows = [];

    $scope.gridOptions.onRegisterApi = function (gridApi) {
        $scope.gridApi = gridApi;

        gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
            if (oldValue != newValue) {
                console.log("Column = " + colDef.name + ", Old Value = " + oldValue + ", New Value = " + newValue);

                var matchedRecord = _.find(changedRows, function (i) {
                    return i.firstName == rowEntity.firstName;
                });

                if (!matchedRecord) {
                    changedRows.push(rowEntity);
                }
            }
        });
    };

    $scope.getRows = function () {
        console.log(changedRows);
    }

    $scope.toggleFiltering = function () {
       ...