Available in the Full Version

Data Grid - AngularJS

Show
records
IDProduct NameUnits On OrderUnit Price
Add new row
1Chai10 boxes x 20 bags $ 39
2Chang24 - 12 oz bottles $ 17
3Aniseed Syrup12 - 550 ml bottles $ 13
4Chef Anton's Cajun Seasoning48 - 6 oz jars $ 53
5Chef Anton's Gumbo Mix36 boxes $ 0
6Grandma's Boysenberry Spread12 - 8 oz jars $ 120
7Uncle Bob's Organic Dried Pears12 - 1 lb pkgs. $ 15
8Northwoods Cranberry Sauce12 - 12 oz jars $ 6
9Mishi Kobe Niku18 - 500 g pkgs. $ 29
10Ikura12 - 200 ml jars $ 31

Add Product

Product ID Product Name Units On Order Unit Price
1 10 boxes x 20 bags
2 24 - 12 oz bottles
3 12 - 550 ml bottles
4 48 - 6 oz jars
5 36 boxes
6 12 - 8 oz jars
7 12 - 1 lb pkgs.
8 12 - 12 oz jars
9 18 - 500 g pkgs.
10 12 - 200 ml jars
11 1 kg pkg.
12 10 - 500 g pkgs.
13 2 kg box
14 40 - 100 g pkgs.
15 24 - 250 ml bottles
16 32 - 500 g boxes
17 20 - 1 kg tins
18 16 kg pkg.
19 10 boxes x 12 pieces
20 30 gift boxes

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample demonstrates how AngularJS directives are used with the igGrid.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="/js/angular.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/igniteui-angularjs.js"></script>

    <script src="/data-files/northwind-products.js"></script>

    <script type="text/javascript">
        var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('gridController', function ($scope) {
            $scope.data = angular.copy(northwindProducts.results);

            $scope.deleteProduct = function (ix) {
                $scope.data.splice(ix, 1);
            };

            $scope.addProduct = function () {
                $scope.newProduct.ProductID = $scope.data.length + 1;
                var tmp = angular.copy($scope.newProduct);
                $scope.data.push(tmp);
            };

            $scope.newProduct = {
                ProductID: 21,
                ProductName: null,
                QuantityPerUnit: null,
                UnitsInStock: null
            };
        });
    </script>

    <script id="colTmpl" type="text/template" ng-non-bindable>
        {{if ${UnitsInStock} == null }}
        N/A
        {{elseif ${UnitsInStock} >= (Math.random()+0.5)*${UnitsInStock} }}
        $ ${UnitsInStock}
        <img width='10' height='15' src='https://www.igniteui.com/images/samples/templating-engine/coltemplatewithconditionalcell/arrowup.gif' />
        {{else}}
        $ ${UnitsInStock}
        <img width='10' height='15' src='https://www.igniteui.com/images/samples/templating-engine/coltemplatewithconditionalcell/arrowdown.gif' />
        {{/if}}
    </script>

    <style>
        .row {
            margin-right: 0;
            margin-left: 0;
        }
    </style>
</head>
<body>
    <div ng-app="sampleApp" ng-controller="gridController">
        <div class="row">
            <div class="col-md-8">
                <ig-grid id="grid1"
                         data-source="data"
                         data-source-type="json"
                         width="100%"
                         height="400px"
                         primary-key="ProductID"
                         auto-commit="true"
                         auto-generate-columns="false">
                    <columns>
                        <column key="ProductID" header-text="ID" width="50px" data-type="number"></column>
                        <column key="ProductName" header-text="Product Name" width="250px" data-type="string"></column>
                        <column key="QuantityPerUnit" header-text="Units On Order" width="200px" data-type="string"></column>
                        <column key="UnitsInStock" header-text="Unit Price" width="100px" data-type="number" template="{{getHtml('#colTmpl')}}"></column>
                    </columns>
                    <features>
                        <feature name="Updating">
                            <column-settings>
                                <column-setting column-key="ProductID" read-only="true">
                                </column-setting>
                            </column-settings>
                        </feature>
                        <feature name="Paging" page-size="10">
                        </feature>
                        <feature name="Sorting">
                        </feature>
                    </features>
                </ig-grid>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h4>Add Product</h4>
                    </div>
                    <div class="card-block">
                        <form name="myForm">
                            <input type="text" ng-model="newProduct.ProductName" class="form-control" placeholder="Product Name">
                            <input type="text" ng-model="newProduct.QuantityPerUnit" class="form-control" placeholder="Units On Order">
                            <input type="number" ng-model="newProduct.UnitsInStock" name="unitsInStock" class="form-control" placeholder="Unit Price">
                            <input type="button" value="Add row" ng-click="addProduct()" ng-disabled="myForm.unitsInStock.$error.number" class="btn btn-secondary" />
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <hr />
        <table id="simpletable" class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Product ID</th>
                    <th>Product Name</th>
                    <th>Units On Order</th>
                    <th>Unit Price</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="product in data">
                    <td>{{product.ProductID}}</td>
                    <td><input type="text" ng-model="product.ProductName" class="form-control" /></td>
                    <td>{{product.QuantityPerUnit}}</td>
                    <td><input type="number" ng-model="product.UnitsInStock" class="form-control" /></td>
                    <td><input type="button" value="Delete row" ng-click="deleteProduct($index)" class="btn btn-secondary" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>