├── samples ├── iggrid.js ├── images │ ├── arrowUp.gif │ └── arrowDown.gif ├── grid │ └── master-detail │ │ └── app │ │ ├── app.js │ │ ├── services │ │ └── dataService.js │ │ ├── controllers │ │ └── masterDetailController.js │ │ └── lib │ │ └── Math.uuid.js ├── sample.css ├── js │ └── data │ │ ├── population.js │ │ ├── tasks.js │ │ └── candidates.js ├── igUpload.html ├── igDialog.html ├── igVideoPlayer.html ├── igCombo.html ├── igHierarchicalGrid.html ├── igTileManager.html ├── igTreeGrid.html ├── igEditors.html ├── igMap.html └── igHtmlEditor.html ├── src-samples ├── src │ ├── iggrid.js │ ├── images │ │ ├── arrowUp.gif │ │ └── arrowDown.gif │ ├── grid │ │ └── master-detail │ │ │ ├── app │ │ │ ├── app.js │ │ │ ├── services │ │ │ │ └── dataService.js │ │ │ ├── controllers │ │ │ │ └── masterDetailController.js │ │ │ └── lib │ │ │ │ └── Math.uuid.js │ │ │ └── index.html │ ├── sample.css │ ├── js │ │ └── data │ │ │ ├── population.js │ │ │ ├── tasks.js │ │ │ └── candidates.js │ ├── igUpload.html │ ├── igDialog.html │ ├── igVideoPlayer.html │ ├── igCombo.html │ ├── igHierarchicalGrid.html │ ├── igTreeGrid.html │ ├── igEditors.html │ ├── igMap.html │ ├── igTileManager.html │ ├── igHtmlEditor.html │ ├── igGrid-controller.html │ ├── igPivotGrid-FlatDataSource.html │ ├── igPivotGrid-XmlaDataSource.html │ ├── igDataChart.html │ ├── igGrid.html │ └── igTree.html ├── app.js ├── .gitignore ├── grunt │ ├── tasks │ │ └── generator.js │ └── lib │ │ └── generator.js ├── package.json ├── gruntfile.js ├── igniteui-angular-samples.sln ├── readme.md ├── template │ └── template.html └── igniteui-angular-samples.njsproj ├── .jshintrc ├── images ├── igniteui-logo.png └── home-background.jpg ├── .gitignore ├── indexController.js ├── test ├── protractor-conf.js ├── app │ ├── js │ │ ├── util.js │ │ └── my-app-utils.js │ └── index.html └── karma.conf.js ├── dist └── npm │ ├── package.json │ └── license.txt ├── bower.json ├── .travis.yml ├── .github └── workflows │ ├── node.js.yml │ └── npm-publish.yml ├── Gruntfile.js ├── license.txt └── package.json /samples/iggrid.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src-samples/src/iggrid.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src-samples/app.js: -------------------------------------------------------------------------------- 1 | // empty - for now... -------------------------------------------------------------------------------- /src-samples/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "jQuery": true, 4 | "angular": true 5 | } 6 | } -------------------------------------------------------------------------------- /images/igniteui-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-angularjs/HEAD/images/igniteui-logo.png -------------------------------------------------------------------------------- /images/home-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-angularjs/HEAD/images/home-background.jpg -------------------------------------------------------------------------------- /samples/images/arrowUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-angularjs/HEAD/samples/images/arrowUp.gif -------------------------------------------------------------------------------- /samples/images/arrowDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-angularjs/HEAD/samples/images/arrowDown.gif -------------------------------------------------------------------------------- /src-samples/src/images/arrowUp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-angularjs/HEAD/src-samples/src/images/arrowUp.gif -------------------------------------------------------------------------------- /src-samples/src/images/arrowDown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgniteUI/igniteui-angularjs/HEAD/src-samples/src/images/arrowDown.gif -------------------------------------------------------------------------------- /samples/grid/master-detail/app/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var app = angular.module("app", ["ngResource", "igniteui-directives"]); 4 | 5 | app.constant("localStorage", window.localStorage); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | test_out 4 | coverage 5 | instrument 6 | dist/igniteui-angularjs.min.js 7 | dist/npm/igniteui-angularjs.js 8 | dist/npm/igniteui-angularjs.min.js 9 | -------------------------------------------------------------------------------- /src-samples/src/grid/master-detail/app/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var app = angular.module("app", ["ngResource", "igniteui-directives"]); 4 | 5 | app.constant("localStorage", window.localStorage); -------------------------------------------------------------------------------- /indexController.js: -------------------------------------------------------------------------------- 1 | angular.module('app').controller('indexController', 2 | 3 | ['$scope', 'northwindEmployees', 4 | function ($scope, northwindEmployees) { 5 | 6 | 'use strict'; 7 | 8 | $scope.employees = northwindEmployees.data.slice(0,4); 9 | 10 | $scope.firstEmployee = $scope.employees[0]; 11 | 12 | }]); -------------------------------------------------------------------------------- /src-samples/grunt/tasks/generator.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | 'use strict'; 4 | 5 | grunt.registerMultiTask('generator', 'Generates samples with common layout', function () { 6 | var done = this.async(); 7 | var generator = require('../lib/generator.js'); 8 | var config = this.data; 9 | 10 | console.log(config.paths.source); 11 | 12 | generator.generate(config, function (stats) { 13 | grunt.log.write(stats.message.yellow) 14 | done(); 15 | }); 16 | }); 17 | }; -------------------------------------------------------------------------------- /src-samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static-site-layout", 3 | "version": "0.0.1", 4 | "description": "Builds static websites with associated CSS and JavaScript files.", 5 | "main": "app.js", 6 | "dependencies": { 7 | "walk": "~2.3.3", 8 | "fs-extra": "^0.11.1", 9 | "graceful-fs": "^3.0.2", 10 | "grunt": "^0.4.5", 11 | "load-grunt-tasks": "^0.6.0", 12 | "grunt-contrib-watch": "^0.6.1" 13 | }, 14 | "devDependencies": {}, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified\" && exit 1" 17 | }, 18 | "author": "Craig Shoemaker", 19 | "license": "MIT" 20 | } 21 | -------------------------------------------------------------------------------- /samples/sample.css: -------------------------------------------------------------------------------- 1 | .push-down { 2 | margin-top:4em; 3 | } 4 | 5 | .push-down-md { 6 | margin-top:2em; 7 | } 8 | 9 | .push-down-xs { 10 | margin-top:1em; 11 | } 12 | 13 | footer { 14 | border-top:1px solid #ccc; 15 | background-color:#ddd; 16 | padding:50px; 17 | margin-top:25px; 18 | color:#999; 19 | } 20 | 21 | .description { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 15px; 24 | margin-top: 15px; 25 | } 26 | 27 | .try-it-out hr { 28 | margin: 0; 29 | margin-top: 4px; 30 | } 31 | 32 | 33 | .try-it-out ul li{ 34 | margin-top: 8px; 35 | margin-bottom: 8px; 36 | } -------------------------------------------------------------------------------- /src-samples/src/sample.css: -------------------------------------------------------------------------------- 1 | .push-down { 2 | margin-top:4em; 3 | } 4 | 5 | .push-down-md { 6 | margin-top:2em; 7 | } 8 | 9 | .push-down-xs { 10 | margin-top:1em; 11 | } 12 | 13 | footer { 14 | border-top:1px solid #ccc; 15 | background-color:#ddd; 16 | padding:50px; 17 | margin-top:25px; 18 | color:#999; 19 | } 20 | 21 | .description { 22 | border-bottom: 1px solid #eee; 23 | margin-bottom: 15px; 24 | margin-top: 15px; 25 | } 26 | 27 | .try-it-out hr { 28 | margin: 0; 29 | margin-top: 4px; 30 | } 31 | 32 | 33 | .try-it-out ul li{ 34 | margin-top: 8px; 35 | margin-bottom: 8px; 36 | } -------------------------------------------------------------------------------- /test/protractor-conf.js: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | 3 | // https://www.protractortest.org/#/server-setup#connecting-directly-to-browser-drivers 4 | directConnect: true, 5 | 6 | allScriptsTimeout: 11000, 7 | 8 | plugins : [{ 9 | path: "../node_modules/protractor-istanbul-plugin", 10 | outputPath: "coverage/protractor" 11 | }], 12 | 13 | specs: [ 14 | "e2e/*.js" 15 | ], 16 | //chromeOnly: true, //https://github.com/angular/protractor/issues/187 17 | capabilities: { 18 | "browserName": "chrome" 19 | }, 20 | 21 | baseUrl: "http://localhost:8000/test/app/", 22 | 23 | framework: "jasmine", 24 | 25 | jasmineNodeOpts: { 26 | defaultTimeoutInterval: 30000 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /samples/js/data/population.js: -------------------------------------------------------------------------------- 1 | app.factory('populationData', [function () { 2 | 3 | var svc = { 4 | data: [ 5 | { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 }, 6 | { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 }, 7 | { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 }, 8 | { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 }, 9 | { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 } 10 | ] 11 | }; 12 | 13 | return svc; 14 | 15 | }]); -------------------------------------------------------------------------------- /src-samples/src/js/data/population.js: -------------------------------------------------------------------------------- 1 | app.factory('populationData', [function () { 2 | 3 | var svc = { 4 | data: [ 5 | { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 }, 6 | { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 }, 7 | { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 }, 8 | { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 }, 9 | { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 } 10 | ] 11 | }; 12 | 13 | return svc; 14 | 15 | }]); -------------------------------------------------------------------------------- /src-samples/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | generator: { 6 | 'default': { 7 | paths: { 8 | source: './src', 9 | destination: '../samples', 10 | template: './template/template.html' 11 | } 12 | } 13 | }, 14 | watch: { 15 | scripts: { 16 | files: ['./src/**','./template/**'], 17 | tasks: ['generator:default'] 18 | }, 19 | } 20 | }); 21 | 22 | 23 | grunt.loadNpmTasks('grunt-contrib-watch'); 24 | 25 | require('load-grunt-tasks')(grunt); 26 | 27 | grunt.loadTasks('./grunt/tasks'); 28 | 29 | grunt.registerTask('default', ['generator:default']); 30 | 31 | }; -------------------------------------------------------------------------------- /dist/npm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "igniteui-angularjs", 3 | "version": "1.0.4", 4 | "main": "dist/igniteui-angularjs.min.js", 5 | "author": "igniteui", 6 | "description" : "A packaged version of IgniteUI directives for AngularJS", 7 | "keywords": [ 8 | "ignite ui", 9 | "igniteui", 10 | "angular", 11 | "angularjs", 12 | "infragistics", 13 | "jquery widgets", 14 | "data visualization", 15 | "data grids", 16 | "jquery controls" 17 | ], 18 | "license": "MIT", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/IgniteUI/igniteui-angularjs.git" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/IgniteUI/igniteui-angularjs/issues" 25 | }, 26 | "homepage": "https://github.com/IgniteUI/igniteui-angularjs", 27 | "dependencies": { 28 | "angular": "", 29 | "jquery": "", 30 | "jquery-ui": "" 31 | }, 32 | "devDependencies": {}, 33 | "scripts": {} 34 | } 35 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "igniteui-angularjs", 3 | "description": "Ignite UI controls for AngularJS", 4 | "homepage": "http://igniteui.com", 5 | "main": "src/igniteui-angularjs.js", 6 | "keywords": [ 7 | "ui", 8 | "controls", 9 | "components", 10 | "infragistics", 11 | "angular" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "git://github.com/IgniteUI/igniteui-angularjs.git" 16 | }, 17 | "moduleType": [ 18 | "amd", 19 | "globals" 20 | ], 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "samples", 28 | "src-samples", 29 | "images", 30 | "index.html", 31 | "indexController.js", 32 | "bower.json", 33 | "package.json", 34 | "Gruntfile.js" 35 | ], 36 | "devDependencies": { 37 | "angular": "", 38 | "angular-route": "", 39 | "angular-loader": "", 40 | "angular-mocks": "", 41 | "html5-boilerplate": "" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /samples/grid/master-detail/app/services/dataService.js: -------------------------------------------------------------------------------- 1 | app.factory("dataService", 2 | 3 | ["$http", "$q", 4 | function($http, $q){ 5 | 6 | "use strict"; 7 | 8 | var svc = { 9 | 10 | getAll: function(){ 11 | 12 | var deferred = $q.defer(); 13 | 14 | $http.get("/api/homes").success(deferred.resolve).error(deferred.reject); 15 | 16 | return deferred.promise; 17 | }, 18 | 19 | save: function (home) { 20 | var deferred = $q.defer(); 21 | 22 | $http.post("/api/homes", home).success(function (result) { 23 | deferred.resolve(result); 24 | }).error(deferred.reject); 25 | 26 | return deferred.promise; 27 | }, 28 | }; 29 | 30 | return svc; 31 | 32 | }]); -------------------------------------------------------------------------------- /src-samples/src/grid/master-detail/app/services/dataService.js: -------------------------------------------------------------------------------- 1 | app.factory("dataService", 2 | 3 | ["$http", "$q", 4 | function($http, $q){ 5 | 6 | "use strict"; 7 | 8 | var svc = { 9 | 10 | getAll: function(){ 11 | 12 | var deferred = $q.defer(); 13 | 14 | $http.get("/api/homes").success(deferred.resolve).error(deferred.reject); 15 | 16 | return deferred.promise; 17 | }, 18 | 19 | save: function (home) { 20 | var deferred = $q.defer(); 21 | 22 | $http.post("/api/homes", home).success(function (result) { 23 | deferred.resolve(result); 24 | }).error(deferred.reject); 25 | 26 | return deferred.promise; 27 | }, 28 | }; 29 | 30 | return svc; 31 | 32 | }]); -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: xenial 3 | language: node_js 4 | node_js: 5 | - 'lts/*' 6 | addons: 7 | chrome: stable 8 | services: 9 | - xvfb 10 | before_install: 11 | - export DISPLAY=:99.0 12 | - sleep 3 13 | script: 14 | - npm run start 15 | - sleep 3 16 | - grunt default 17 | - npm run instrument 18 | - npm run test-single 19 | - npm run protractor 20 | - npm run cover-combined 21 | - cat ./coverage/final/lcov.info | coveralls 22 | 23 | # before_deploy: 24 | # # package and navigate to dist 25 | # - grunt build 26 | # - cd dist/npm 27 | # # update package version 28 | # - npm version "$TRAVIS_TAG" --no-git-tag-version --save 29 | 30 | # deploy: 31 | # provider: npm 32 | # skip_cleanup: true 33 | # email: igniteui@infragistics.com 34 | # api_key: 35 | # secure: awkGIEJWnAsXTag3RTFVpEdkx8WSspSqbT6rV3S0VlaIUN1lcMSBIrdNVzyTkKGq4s6SbY8omdHzfX/6uGDMM6+HMI7kGQeYHH0M73dzlVNj0TJ1xHKJ6zuqDXsWWatIRFYe7EkbX3xl9d0b0mfvHMIaLXH1CwxiLVF60CCFfLU= 36 | # on: 37 | # tags: true 38 | # repo: IgniteUI/igniteui-angularjs 39 | # branch: master 40 | -------------------------------------------------------------------------------- /src-samples/igniteui-angular-samples.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 2013 4 | VisualStudioVersion = 12.0.30723.0 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}") = "igniteui-angularjs-samples", "igniteui-angularjs-samples.njsproj", "{67F9E854-0DD9-45A9-9253-5079166B847F}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {67F9E854-0DD9-45A9-9253-5079166B847F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {67F9E854-0DD9-45A9-9253-5079166B847F}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {67F9E854-0DD9-45A9-9253-5079166B847F}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {67F9E854-0DD9-45A9-9253-5079166B847F}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | EndGlobal 23 | -------------------------------------------------------------------------------- /test/app/js/util.js: -------------------------------------------------------------------------------- 1 | function executeScript(script) { 2 | browser.driver.executeScript(script); 3 | } 4 | 5 | function getResult(script) { 6 | return browser.driver.executeScript("return " + script); 7 | } 8 | 9 | function getAll(locatior) { 10 | return browser.findElements(locatior); 11 | } 12 | 13 | function isInitialized(elementId, widget) { 14 | expect(element(by.id(elementId)).isDisplayed()).toBe(true); 15 | var isDataExist = getResult('$("#' + elementId + '").data("' + widget + '") != undefined'); 16 | expect(isDataExist).toBe(true); 17 | } 18 | 19 | function resetNorthwindScope() { 20 | browser.driver.executeScript( 21 | 'angular.element($("#grid1")).scope().northwind = angular.copy(angular.element($("#grid1")).scope().northwind_bak.slice(0));' 22 | ); 23 | browser.driver.executeScript( 24 | 'angular.element($("#grid1")).scope().$apply();' 25 | ); 26 | } 27 | 28 | module.exports.executeScript = executeScript; 29 | module.exports.getResult = getResult; 30 | module.exports.isInitialized = isInitialized; 31 | module.exports.getAll = getAll; 32 | module.exports.resetNorthwindScope = resetNorthwindScope; -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [ master ] 9 | pull_request: 10 | branches: [ master ] 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [12.x, 14.x] 20 | 21 | steps: 22 | - uses: actions/checkout@v2 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | - run: npm ci 28 | - run: npm run hint 29 | - run: npm run test-single 30 | 31 | - name: Publish to coveralls.io 32 | if: github.repository == 'IgniteUI/igniteui-angularjs' && matrix.node-version == '14.x' 33 | uses: coverallsapp/github-action@v1.1.2 34 | with: 35 | path-to-lcov: ./coverage/lcov.info 36 | github-token: ${{ github.token }} 37 | -------------------------------------------------------------------------------- /src-samples/readme.md: -------------------------------------------------------------------------------- 1 | # Samples Source 2 | The files contained in this folder are the source files for the samples. The samples are generated by combining partial HTML files with the template file and are ultimately placed in the `samples` folder off the root of this repository. 3 | 4 | ## Building Samples 5 | When you are developing samples you should use `grunt watch` which automatically rebuilds the samples any time you make a change to any file associated with the samples. 6 | 7 | If you want to manually build the samples you can run `grunt generator:default`. 8 | 9 | ## Using Partial HTML Files 10 | Sample HTML files are available under the `src` folder and require that you use a few placeholder tokens in order to build pages correctly. 11 | 12 | ### Tokens 13 | - `|styles|`: Used to add `link` and `style` elements to the top of the page inside the `head` element 14 | - `|content|`: Used to add the main markup of the page 15 | - `|scripts|`: Used to add scripts at the end of the page 16 | 17 | **Note:** In order for relative links to work on your machine the same way they work on the server ([github.io](http://igniteui.github.io/igniteui-angularjs/)) you need to run the samples from a root directory named `igniteui-angularjs`. 18 | 19 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Npm.js deploy 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | registry-url: 'https://registry.npmjs.org' 16 | - run: echo "VERSION=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_ENV 17 | - run: echo ${VERSION} 18 | 19 | - run: echo "NG_CLI_ANALYTICS=false" >> $GITHUB_ENV 20 | - run: echo "NODE_OPTIONS='--max_old_space_size=4096'" >> $GITHUB_ENV 21 | - run: npm ci 22 | 23 | - run: npm run build 24 | 25 | # define npm tag 26 | - run: if [[ ${VERSION} == *"alpha"* || ${VERSION} == *"beta"* || ${VERSION} == *"rc"* ]]; then echo "NPM_TAG=next"; else echo "NPM_TAG=latest"; fi >> $GITHUB_ENV 27 | - run: echo ${NPM_TAG} 28 | 29 | # copy readme 30 | - run: cp ../../README.md README.md 31 | working-directory: dist/npm 32 | 33 | # create version and publish it to npmjs 34 | - run: npm version ${VERSION} --no-git-tag-version --save --verbose 35 | working-directory: dist/npm 36 | 37 | - run: npm publish --tag ${NPM_TAG} 38 | working-directory: dist/npm 39 | env: 40 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 41 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON("package.json"), 5 | uglify: { 6 | options: { 7 | banner: "/*! <%= pkg.name %> <%= grunt.template.today(\"dd-mm-yyyy\") %> */\n", 8 | report: "min" 9 | }, 10 | build: { 11 | src: [ "src/igniteui-angularjs.js" ], 12 | dest: "dist/<%= pkg.name %>.min.js" 13 | } 14 | }, 15 | 16 | watch: { 17 | scripts: { 18 | files: ["src/igniteui-angularjs.js"], 19 | tasks: ["jshint"], 20 | options: { 21 | spawn: false 22 | } 23 | } 24 | }, 25 | 26 | jshint: { 27 | all: ["Gruntfile.js", "src/igniteui-angularjs.js"], 28 | options: { 29 | jshintrc: ".jshintrc", 30 | reporter: require("jshint-stylish") 31 | } 32 | }, 33 | 34 | exec: { 35 | update_src_npm: { 36 | cmd: 'cp src/igniteui-angularjs.js dist/npm/' 37 | }, 38 | 39 | update_min_npm: { 40 | cmd: 'cp dist/igniteui-angularjs.min.js dist/npm/' 41 | } 42 | } 43 | }); 44 | 45 | // Event handling 46 | grunt.event.on("watch", function (action, filepath) { 47 | grunt.config(["jshint", "all"], filepath); 48 | }); 49 | 50 | grunt.loadNpmTasks("grunt-contrib-uglify"); 51 | grunt.loadNpmTasks("grunt-contrib-jshint"); 52 | grunt.loadNpmTasks("grunt-contrib-watch"); 53 | grunt.loadNpmTasks('grunt-exec'); 54 | 55 | grunt.registerTask("build", ["uglify", "exec:update_src_npm", "exec:update_min_npm"]); 56 | 57 | grunt.registerTask("default", ["jshint"]); 58 | 59 | }; 60 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | config.set({ 3 | 4 | basePath: "../", 5 | 6 | files: [ 7 | "http://code.jquery.com/jquery-1.10.2.min.js", 8 | "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js", 9 | "bower_components/angular/angular.js", 10 | "bower_components/angular-route/angular-route.js", 11 | "bower_components/angular-mocks/angular-mocks.js", 12 | "https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js", 13 | "https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js", 14 | "https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js", 15 | "src/igniteui-angularjs.js", 16 | "test/app/js/my-app.js", 17 | "test/unit/**/*.js" 18 | ], 19 | 20 | crossOriginAttribute: false, 21 | 22 | autoWatch: true, 23 | 24 | frameworks: ["jasmine"], 25 | 26 | plugins: [ 27 | require('karma-jasmine'), 28 | require('karma-coverage'), 29 | require('karma-chrome-launcher'), 30 | require('karma-jasmine-html-reporter') 31 | ], 32 | client: { 33 | clearContext: false // leave Jasmine Spec Runner output visible in browser 34 | }, 35 | reporters: ["progress", "coverage"], 36 | 37 | preprocessors: { 38 | 'src/*.js': ['coverage'] 39 | }, 40 | 41 | coverageReporter: { 42 | dir: require('path').join(__dirname, '../coverage/'), 43 | subdir: '.', 44 | reporters: [ 45 | { type: 'lcovonly' } 46 | ], 47 | }, 48 | 49 | browsers: ["ChromeHeadless"] 50 | }); 51 | }; 52 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Infragistics, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | 23 | ---- 24 | 25 | This MIT license does not apply to the Ignite UI controls toolset (http://igniteui.com) 26 | referenced/used in this repository. Please refer to the license for Ignite UI at: 27 | http://www.infragistics.com/legal/license/ultimate/ 28 | 29 | Other libraries referenced/used in this repository are subject to their own 30 | licenses. Please refer to their agreements for details. These other 31 | components/libraries are provided "AS IS", WITHOUT WARRANTY OF ANY KIND, 32 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 33 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN 34 | NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 35 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 36 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE OTHER COMPONENTS 37 | OR THE USE OF OTHER DEALINGS IN THE OTHER COMPONENTS. 38 | -------------------------------------------------------------------------------- /dist/npm/license.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Infragistics, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | 23 | ---- 24 | 25 | This MIT license does not apply to the Ignite UI controls toolset (http://igniteui.com) 26 | referenced/used in this repository. Please refer to the license for Ignite UI at: 27 | http://www.infragistics.com/legal/license/ultimate/ 28 | 29 | Other libraries referenced/used in this repository are subject to their own 30 | licenses. Please refer to their agreements for details. These other 31 | components/libraries are provided "AS IS", WITHOUT WARRANTY OF ANY KIND, 32 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 33 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN 34 | NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 35 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 36 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE OTHER COMPONENTS 37 | OR THE USE OF OTHER DEALINGS IN THE OTHER COMPONENTS. 38 | -------------------------------------------------------------------------------- /samples/js/data/tasks.js: -------------------------------------------------------------------------------- 1 | app.factory("tasks", [function () { 2 | var svc = { 3 | data: [ 4 | { 5 | "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [ 6 | { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" }, 7 | { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" }, 8 | { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" }, 9 | { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" }, 10 | { 11 | "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [ 12 | { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" }, 13 | { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" }, 14 | { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" } 15 | ] 16 | }, 17 | { 18 | "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [ 19 | { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" }, 20 | { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" }, 21 | { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" }, 22 | { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" } 23 | ] 24 | }, 25 | { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" } 26 | ] 27 | } 28 | ] 29 | }; 30 | return svc; 31 | }]); -------------------------------------------------------------------------------- /src-samples/src/js/data/tasks.js: -------------------------------------------------------------------------------- 1 | app.factory("tasks", [function () { 2 | var svc = { 3 | data: [ 4 | { 5 | "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [ 6 | { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" }, 7 | { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" }, 8 | { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" }, 9 | { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" }, 10 | { 11 | "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [ 12 | { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" }, 13 | { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" }, 14 | { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" } 15 | ] 16 | }, 17 | { 18 | "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [ 19 | { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" }, 20 | { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" }, 21 | { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" }, 22 | { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" } 23 | ] 24 | }, 25 | { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" } 26 | ] 27 | } 28 | ] 29 | }; 30 | return svc; 31 | }]); -------------------------------------------------------------------------------- /src-samples/src/igUpload.html: -------------------------------------------------------------------------------- 1 | |title|Upload|title| 2 | 3 | |styles| 4 | 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igUpload

11 |
12 |
13 | TRY IT OUT: 14 |
15 |
    16 |
  • Click on the button to upload a file
    • 17 |
18 |
19 |
20 |

This sample demonstrates how create an igUpload using an AngularJS directive.

21 |

Note: There is no server configured with this sample, so uploads will fail.

22 |

Explore the Code

23 |
24 |
25 | 26 | 27 |
28 | |content| 29 | 30 | |scripts| 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igDialog.html: -------------------------------------------------------------------------------- 1 | |title|igDialog|title| 2 | 3 | 4 | |styles| 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igDialog

11 |
12 |
13 | TRY IT OUT: 14 |
15 |
    16 |
  • Drag the dialog around the page by the header
    • 17 |
  • Close the dialog and refresh the page to see it reappear
    • 18 |
19 |
20 |
21 |

This sample demonstrates how to declare an igDialog with an AngularJS directive.

22 |

Explore the Code 23 |

24 |
25 |
26 | 27 | 28 | 29 |

30 | 31 |

32 | 33 | 34 | 35 |
36 | |content| 37 | 38 | |scripts| 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igVideoPlayer.html: -------------------------------------------------------------------------------- 1 | |title|igVideoPlayer|title| 2 | 3 | |styles| 4 | 5 | |styles| 6 | 7 | |content| 8 |
9 |

igVideoPlayer

10 |
11 |
12 | TRY IT OUT: 13 |
14 |
    15 |
  • Play the video
    • 16 |
17 |
18 |
19 |

This sample demonstrates how create an igVideoPlayer with an AngularJS directive.

20 |

Explore the Code

21 |
22 |
23 | 24 | 25 | http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.h264.mp4 26 | http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.webmvp8.webm 27 | http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.theora.ogv 28 | 29 | 30 |
31 | |content| 32 | 33 | |scripts| 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | |scripts| -------------------------------------------------------------------------------- /test/app/js/my-app-utils.js: -------------------------------------------------------------------------------- 1 | function testEventListener(widget, elementId, event) { 2 | return $("#" + elementId).data(widget).options[event] !== undefined; 3 | } 4 | 5 | function typeInInput(characters, element, callback) { 6 | var keyDown = jQuery.Event("keydown"), 7 | keyPress = jQuery.Event("keypress"), 8 | keyUp = jQuery.Event("keyup"), 9 | value = ""; 10 | 11 | characters.split("").forEach(function (ch) { 12 | keyDown.keyCode = keyUp.keyCode = keyPress.keyCode = ch.charCodeAt(0); 13 | keyDown.charCode = keyUp.charCode = keyPress.charCode = ch.charCodeAt(0); 14 | element.trigger(keyDown); 15 | element.trigger(keyPress); 16 | value = value + ch; 17 | element.val(value); 18 | element.trigger(keyUp); 19 | element.trigger("input"); // also throw input for Angular, ngModel only listens for that when supported 20 | if (callback) { 21 | callback(); 22 | } 23 | }); 24 | } 25 | 26 | function typeInInputWrap(characters, element, scopeEval) { 27 | var editUpdateFlag = false, 28 | scope = element.scope(), 29 | originalValue = scope.$eval(scopeEval); 30 | typeInInput(characters, element, function () { 31 | //check scope value remains unchanged during search entry 32 | if (scope.$eval(scopeEval) != originalValue) { 33 | editUpdateFlag = true; 34 | } 35 | }); 36 | return editUpdateFlag; 37 | } 38 | 39 | function keyInteraction(key, target, special) { 40 | keyDownChar(key, target, special); 41 | keyPressChar(key, target, special); 42 | keyUpChar(key, target, special); 43 | } 44 | function keyDownChar(key, target, special) { 45 | var evt = $.Event("keydown"); 46 | evt.keyCode = key; 47 | evt.charCode = key; 48 | if (special) { 49 | evt[special] = true; 50 | } 51 | target.trigger(evt); 52 | } 53 | function keyPressChar(key, target, special) { 54 | var evt = $.Event("keypress"); 55 | evt.keyCode = key; 56 | evt.charCode = key; 57 | if (special) { 58 | evt[special] = true; 59 | } 60 | target.trigger(evt); 61 | } 62 | function keyUpChar(key, target, special) { 63 | var evt = $.Event("keyup"); 64 | evt.keyCode = key; 65 | evt.charCode = key; 66 | if (special) { 67 | evt[special] = true; 68 | } 69 | target.trigger(evt); 70 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "igniteui-angularjs", 3 | "version": "1.0.4", 4 | "main": "src/igniteui-angularjs.js", 5 | "author": "IgniteUI", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/IgniteUI/igniteui-angularjs.git" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/IgniteUI/igniteui-angularjs/issues" 13 | }, 14 | "homepage": "https://github.com/IgniteUI/igniteui-angularjs", 15 | "dependencies": {}, 16 | "devDependencies": { 17 | "mkdirp": "", 18 | "coveralls": "", 19 | "grunt": "", 20 | "grunt-exec": "", 21 | "grunt-contrib-jshint": "", 22 | "grunt-contrib-uglify": "", 23 | "grunt-contrib-watch": "", 24 | "jshint-stylish": "", 25 | "protractor": "^7.0.0", 26 | "protractor-istanbul-plugin": "", 27 | "http-server": "", 28 | "bower": "", 29 | "shelljs": "", 30 | "istanbul-coveralls": "", 31 | "karma": "^6.3.2", 32 | "karma-chrome-launcher": "~2.2.0", 33 | "karma-coverage": "^2.0.3", 34 | "karma-jasmine": "^4.0.1", 35 | "karma-jasmine-html-reporter": "^1.5.4", 36 | "karma-junit-reporter": "^2.0.1" 37 | }, 38 | "scripts": { 39 | "postinstall": "bower install", 40 | "instrument": "istanbul instrument ./src/ -o ./instrument/", 41 | "cover-protractor": "rm -rf coverage/tmp && mkdirp coverage/tmp/ && cp coverage/protractor/*.json coverage/tmp/ && istanbul report --include=./coverage/tmp/*.json -dir coverage/final", 42 | "cover-combined": "rm -rf coverage/tmp && mkdirp coverage/tmp/ && cp coverage/karma/**/coverage*.json coverage/tmp/ && cp coverage/protractor/*.json coverage/tmp/ && istanbul report --include=./coverage/tmp/*.json -dir coverage/final", 43 | "start": "http-server -a localhost -p 8000 &", 44 | "test": "karma start test/karma.conf.js", 45 | "test-single": "karma start test/karma.conf.js --single-run --code-coverage", 46 | "test-single-firefox": "karma start test/karma.conf.js --browsers Firefox --single-run --reporters junit,dots", 47 | "preprotractor": "webdriver-manager update", 48 | "protractor": "protractor test/protractor-conf.js", 49 | "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\"", 50 | "hint": "grunt default", 51 | "build": "grunt build" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src-samples/template/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | |title| - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | |styles| 13 | 14 | 15 | 16 | 35 | |content| 36 | 44 | 45 | 46 | 47 | 48 | 49 | |scripts| 50 | 51 | -------------------------------------------------------------------------------- /samples/grid/master-detail/app/controllers/masterDetailController.js: -------------------------------------------------------------------------------- 1 | app.controller("masterDetailController", 2 | 3 | ["$scope", "dataService", 4 | function ($scope, dataService) { 5 | 6 | "use strict"; 7 | 8 | $scope.error = null; 9 | 10 | $scope.message = ""; 11 | 12 | $scope.selectedHome = null; 13 | $scope.selectedHomeOriginal = null; 14 | 15 | $scope.save = function(){ 16 | dataService.save($scope.selectedHome).then(function(){ 17 | $scope.selectedHome = null; 18 | $scope.message = "Home saved"; 19 | }, 20 | function(error){ 21 | $scope.error = error; 22 | angular.copy($scope.selectedHomeOriginal, $scope.selectedHome); 23 | }); 24 | }; 25 | 26 | $scope.cancel = function(){ 27 | angular.copy($scope.selectedHomeOriginal, $scope.selectedHome); 28 | $scope.selectedHome = null; 29 | }; 30 | 31 | dataService.getAll().then(function(homes){ 32 | $scope.homes = homes; 33 | }, function(error){ 34 | $scope.error = error; 35 | }); 36 | 37 | // **** Grid-related event handlers ******** 38 | $scope.homesGridRendered = function(e){ 39 | $scope.message = "Grid is rendered"; 40 | }; 41 | 42 | $scope.homesGridColumnSorted = function(e, u){ 43 | $scope.$apply(function () { 44 | $scope.message = "Column sorted"; 45 | }); 46 | }; 47 | 48 | $scope.homesGridPageSelectionChanged = function(e, u){ 49 | $scope.$apply(function () { 50 | $scope.message = "Page index changed"; 51 | }); 52 | }; 53 | 54 | $scope.homesGridPageSizeChanged = function(e, u){ 55 | $scope.$apply(function () { 56 | $scope.message = "Page size changed"; 57 | }); 58 | }; 59 | 60 | $scope.homesGridRowSelectionChanged = function (e, ui) { 61 | 62 | var id = ui.row.id; 63 | 64 | for(var i = 0, len = $scope.homes.length; i < len;i++){ 65 | if($scope.homes[i].id === id){ 66 | $scope.$apply(function () { 67 | debugger; 68 | $scope.selectedHomeOriginal = {}; 69 | angular.copy($scope.homes[i], $scope.selectedHomeOriginal); 70 | $scope.selectedHome = $scope.homes[i]; 71 | $scope.message = "'" + $scope.selectedHome.streetAddress + "' is selected"; 72 | }); 73 | break; 74 | } 75 | } 76 | }; 77 | // ***************************************** 78 | 79 | }]); -------------------------------------------------------------------------------- /src-samples/src/grid/master-detail/app/controllers/masterDetailController.js: -------------------------------------------------------------------------------- 1 | app.controller("masterDetailController", 2 | 3 | ["$scope", "dataService", 4 | function ($scope, dataService) { 5 | 6 | "use strict"; 7 | 8 | $scope.error = null; 9 | 10 | $scope.message = ""; 11 | 12 | $scope.selectedHome = null; 13 | $scope.selectedHomeOriginal = null; 14 | 15 | $scope.save = function(){ 16 | dataService.save($scope.selectedHome).then(function(){ 17 | $scope.selectedHome = null; 18 | $scope.message = "Home saved"; 19 | }, 20 | function(error){ 21 | $scope.error = error; 22 | angular.copy($scope.selectedHomeOriginal, $scope.selectedHome); 23 | }); 24 | }; 25 | 26 | $scope.cancel = function(){ 27 | angular.copy($scope.selectedHomeOriginal, $scope.selectedHome); 28 | $scope.selectedHome = null; 29 | }; 30 | 31 | dataService.getAll().then(function(homes){ 32 | $scope.homes = homes; 33 | }, function(error){ 34 | $scope.error = error; 35 | }); 36 | 37 | // **** Grid-related event handlers ******** 38 | $scope.homesGridRendered = function(e){ 39 | $scope.message = "Grid is rendered"; 40 | }; 41 | 42 | $scope.homesGridColumnSorted = function(e, u){ 43 | $scope.$apply(function () { 44 | $scope.message = "Column sorted"; 45 | }); 46 | }; 47 | 48 | $scope.homesGridPageSelectionChanged = function(e, u){ 49 | $scope.$apply(function () { 50 | $scope.message = "Page index changed"; 51 | }); 52 | }; 53 | 54 | $scope.homesGridPageSizeChanged = function(e, u){ 55 | $scope.$apply(function () { 56 | $scope.message = "Page size changed"; 57 | }); 58 | }; 59 | 60 | $scope.homesGridRowSelectionChanged = function (e, ui) { 61 | 62 | var id = ui.row.id; 63 | 64 | for(var i = 0, len = $scope.homes.length; i < len;i++){ 65 | if($scope.homes[i].id === id){ 66 | $scope.$apply(function () { 67 | debugger; 68 | $scope.selectedHomeOriginal = {}; 69 | angular.copy($scope.homes[i], $scope.selectedHomeOriginal); 70 | $scope.selectedHome = $scope.homes[i]; 71 | $scope.message = "'" + $scope.selectedHome.streetAddress + "' is selected"; 72 | }); 73 | break; 74 | } 75 | } 76 | }; 77 | // ***************************************** 78 | 79 | }]); -------------------------------------------------------------------------------- /samples/grid/master-detail/app/lib/Math.uuid.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Math.uuid.js (v1.4) 3 | http://www.broofa.com 4 | mailto:robert@broofa.com 5 | 6 | Copyright (c) 2010 Robert Kieffer 7 | Dual licensed under the MIT and GPL licenses. 8 | */ 9 | 10 | /* 11 | * Generate a random uuid. 12 | * 13 | * USAGE: Math.uuid(length, radix) 14 | * length - the desired number of characters 15 | * radix - the number of allowable values for each character. 16 | * 17 | * EXAMPLES: 18 | * // No arguments - returns RFC4122, version 4 ID 19 | * >>> Math.uuid() 20 | * "92329D39-6F5C-4520-ABFC-AAB64544E172" 21 | * 22 | * // One argument - returns ID of the specified length 23 | * >>> Math.uuid(15) // 15 character ID (default base=62) 24 | * "VcydxgltxrVZSTV" 25 | * 26 | * // Two arguments - returns ID of the specified length, and radix. (Radix must be <= 62) 27 | * >>> Math.uuid(8, 2) // 8 character ID (base=2) 28 | * "01001010" 29 | * >>> Math.uuid(8, 10) // 8 character ID (base=10) 30 | * "47473046" 31 | * >>> Math.uuid(8, 16) // 8 character ID (base=16) 32 | * "098F4D35" 33 | */ 34 | (function() { 35 | // Private array of chars to use 36 | var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); 37 | 38 | Math.uuid = function (len, radix) { 39 | var chars = CHARS, uuid = [], i; 40 | radix = radix || chars.length; 41 | 42 | if (len) { 43 | // Compact form 44 | for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix]; 45 | } else { 46 | // rfc4122, version 4 form 47 | var r; 48 | 49 | // rfc4122 requires these characters 50 | uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; 51 | uuid[14] = '4'; 52 | 53 | // Fill in random data. At i==19 set the high bits of clock sequence as 54 | // per rfc4122, sec. 4.1.5 55 | for (i = 0; i < 36; i++) { 56 | if (!uuid[i]) { 57 | r = 0 | Math.random()*16; 58 | uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; 59 | } 60 | } 61 | } 62 | 63 | return uuid.join(''); 64 | }; 65 | 66 | // A more performant, but slightly bulkier, RFC4122v4 solution. We boost performance 67 | // by minimizing calls to random() 68 | Math.uuidFast = function() { 69 | var chars = CHARS, uuid = new Array(36), rnd=0, r; 70 | for (var i = 0; i < 36; i++) { 71 | if (i==8 || i==13 || i==18 || i==23) { 72 | uuid[i] = '-'; 73 | } else if (i==14) { 74 | uuid[i] = '4'; 75 | } else { 76 | if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0; 77 | r = rnd & 0xf; 78 | rnd = rnd >> 4; 79 | uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; 80 | } 81 | } 82 | return uuid.join(''); 83 | }; 84 | 85 | // A more compact, but less performant, RFC4122v4 solution: 86 | Math.uuidCompact = function() { 87 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 88 | var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 89 | return v.toString(16); 90 | }); 91 | }; 92 | })(); -------------------------------------------------------------------------------- /src-samples/src/grid/master-detail/app/lib/Math.uuid.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Math.uuid.js (v1.4) 3 | http://www.broofa.com 4 | mailto:robert@broofa.com 5 | 6 | Copyright (c) 2010 Robert Kieffer 7 | Dual licensed under the MIT and GPL licenses. 8 | */ 9 | 10 | /* 11 | * Generate a random uuid. 12 | * 13 | * USAGE: Math.uuid(length, radix) 14 | * length - the desired number of characters 15 | * radix - the number of allowable values for each character. 16 | * 17 | * EXAMPLES: 18 | * // No arguments - returns RFC4122, version 4 ID 19 | * >>> Math.uuid() 20 | * "92329D39-6F5C-4520-ABFC-AAB64544E172" 21 | * 22 | * // One argument - returns ID of the specified length 23 | * >>> Math.uuid(15) // 15 character ID (default base=62) 24 | * "VcydxgltxrVZSTV" 25 | * 26 | * // Two arguments - returns ID of the specified length, and radix. (Radix must be <= 62) 27 | * >>> Math.uuid(8, 2) // 8 character ID (base=2) 28 | * "01001010" 29 | * >>> Math.uuid(8, 10) // 8 character ID (base=10) 30 | * "47473046" 31 | * >>> Math.uuid(8, 16) // 8 character ID (base=16) 32 | * "098F4D35" 33 | */ 34 | (function() { 35 | // Private array of chars to use 36 | var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); 37 | 38 | Math.uuid = function (len, radix) { 39 | var chars = CHARS, uuid = [], i; 40 | radix = radix || chars.length; 41 | 42 | if (len) { 43 | // Compact form 44 | for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix]; 45 | } else { 46 | // rfc4122, version 4 form 47 | var r; 48 | 49 | // rfc4122 requires these characters 50 | uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; 51 | uuid[14] = '4'; 52 | 53 | // Fill in random data. At i==19 set the high bits of clock sequence as 54 | // per rfc4122, sec. 4.1.5 55 | for (i = 0; i < 36; i++) { 56 | if (!uuid[i]) { 57 | r = 0 | Math.random()*16; 58 | uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; 59 | } 60 | } 61 | } 62 | 63 | return uuid.join(''); 64 | }; 65 | 66 | // A more performant, but slightly bulkier, RFC4122v4 solution. We boost performance 67 | // by minimizing calls to random() 68 | Math.uuidFast = function() { 69 | var chars = CHARS, uuid = new Array(36), rnd=0, r; 70 | for (var i = 0; i < 36; i++) { 71 | if (i==8 || i==13 || i==18 || i==23) { 72 | uuid[i] = '-'; 73 | } else if (i==14) { 74 | uuid[i] = '4'; 75 | } else { 76 | if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0; 77 | r = rnd & 0xf; 78 | rnd = rnd >> 4; 79 | uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; 80 | } 81 | } 82 | return uuid.join(''); 83 | }; 84 | 85 | // A more compact, but less performant, RFC4122v4 solution: 86 | Math.uuidCompact = function() { 87 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 88 | var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 89 | return v.toString(16); 90 | }); 91 | }; 92 | })(); -------------------------------------------------------------------------------- /samples/js/data/candidates.js: -------------------------------------------------------------------------------- 1 | app.factory("candidates", [function () { 2 | 3 | var svc = { 4 | data: [ 5 | {name: "Douglas Crockford", text: "Douglas Crockford is an American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for developing various JavaScript related tools such as JSLint and JSMin. He is currently a senior JavaScript architect at PayPal, and is also a writer and speaker on JavaScript, JSON, and related web technologies such as the Yahoo! User Interface Library (YUI).", skills: [ 6 | {description: "JavaScript"}, 7 | {description: "JSON"}, 8 | {description: "HTML"}, 9 | {description: "JSLint"} 10 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/450px-Douglas_Crockford.jpg", linkedin: "http://www.linkedin.com/groups?gid=3165057&trk=group-name" 11 | }, 12 | {name: "John Resig", text: "John Resig is the Dean of Computer Science at Khan Academy and the creator of the jQuery JavaScript library. He's also the author of the books Pro JavaScript Techniques and Secrets of the JavaScript Ninja. Currently, John is located in Brooklyn, NY and enjoys studying Ukiyo-e (Japanese Woodblock Printing) in his spare time.", skills: [ 13 | {description: "JavaScript"}, 14 | {description: "JSON"}, 15 | {description: "HTML"}, 16 | {description: "jQuery"} 17 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/3450728563_69b0bd0743_m.jpg", linkedin: "http://www.linkedin.com/groups?viewMembers=&gid=100943&sik=1360507269893&goback=%2Eanp_100943_1360507269892_1" 18 | }, 19 | {name: "Bill Gates", text: "William Henry 'Bill' Gates III (born October 28, 1955) is an American programmer, inventor, business magnate and philanthropist. Gates is the former chief executive and current chairman of Microsoft, the world's largest personal-computer software company, which he co-founded with Paul Allen. He is consistently ranked among the world's wealthiest people and was the wealthiest overall from 1995 to 2009, excluding 2008, when he was ranked third; in 2011 he was the wealthiest American and the second wealthiest person. During his career at Microsoft, Gates held the positions of CEO and chief software architect, and remains the largest individual shareholder, with 6.4 percent of the common stock. He has also authored and co-authored several books.", skills: [ 20 | {description: "Entrepreneurship"}, 21 | {description: "VB"}, 22 | {description: "Operating Systems"}, 23 | {description: "Programming Languages"} 24 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/220px-BillGates2012.jpg", linkedin: "http://www.linkedin.com/company/8736?trk=tyah" 25 | }, 26 | { 27 | name: "Jon Skeet", text: "Author of C# in Depth. Currently a software engineer at Google, London. Usually a Microsoft MVP (C#, 2003-2010, 2011-)", skills: [ 28 | { description: "C#" }, 29 | { description: ".NET" }, 30 | { description: "Java" } 31 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/jonskeet.jpg", linkedin: "uk.linkedin.com/pub/jon-skeet/0/800/ba3" 32 | } 33 | ] 34 | }; 35 | 36 | return svc; 37 | 38 | }]); -------------------------------------------------------------------------------- /src-samples/src/js/data/candidates.js: -------------------------------------------------------------------------------- 1 | app.factory("candidates", [function () { 2 | 3 | var svc = { 4 | data: [ 5 | {name: "Douglas Crockford", text: "Douglas Crockford is an American computer programmer and entrepreneur who is best known for his ongoing involvement in the development of the JavaScript language, for having popularized the data format JSON (JavaScript Object Notation), and for developing various JavaScript related tools such as JSLint and JSMin. He is currently a senior JavaScript architect at PayPal, and is also a writer and speaker on JavaScript, JSON, and related web technologies such as the Yahoo! User Interface Library (YUI).", skills: [ 6 | {description: "JavaScript"}, 7 | {description: "JSON"}, 8 | {description: "HTML"}, 9 | {description: "JSLint"} 10 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/450px-Douglas_Crockford.jpg", linkedin: "http://www.linkedin.com/groups?gid=3165057&trk=group-name" 11 | }, 12 | {name: "John Resig", text: "John Resig is the Dean of Computer Science at Khan Academy and the creator of the jQuery JavaScript library. He's also the author of the books Pro JavaScript Techniques and Secrets of the JavaScript Ninja. Currently, John is located in Brooklyn, NY and enjoys studying Ukiyo-e (Japanese Woodblock Printing) in his spare time.", skills: [ 13 | {description: "JavaScript"}, 14 | {description: "JSON"}, 15 | {description: "HTML"}, 16 | {description: "jQuery"} 17 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/3450728563_69b0bd0743_m.jpg", linkedin: "http://www.linkedin.com/groups?viewMembers=&gid=100943&sik=1360507269893&goback=%2Eanp_100943_1360507269892_1" 18 | }, 19 | {name: "Bill Gates", text: "William Henry 'Bill' Gates III (born October 28, 1955) is an American programmer, inventor, business magnate and philanthropist. Gates is the former chief executive and current chairman of Microsoft, the world's largest personal-computer software company, which he co-founded with Paul Allen. He is consistently ranked among the world's wealthiest people and was the wealthiest overall from 1995 to 2009, excluding 2008, when he was ranked third; in 2011 he was the wealthiest American and the second wealthiest person. During his career at Microsoft, Gates held the positions of CEO and chief software architect, and remains the largest individual shareholder, with 6.4 percent of the common stock. He has also authored and co-authored several books.", skills: [ 20 | {description: "Entrepreneurship"}, 21 | {description: "VB"}, 22 | {description: "Operating Systems"}, 23 | {description: "Programming Languages"} 24 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/220px-BillGates2012.jpg", linkedin: "http://www.linkedin.com/company/8736?trk=tyah" 25 | }, 26 | { 27 | name: "Jon Skeet", text: "Author of C# in Depth. Currently a software engineer at Google, London. Usually a Microsoft MVP (C#, 2003-2010, 2011-)", skills: [ 28 | { description: "C#" }, 29 | { description: ".NET" }, 30 | { description: "Java" } 31 | ], picture: "http://www.igniteui.com/images/samples/tile-manager/jonskeet.jpg", linkedin: "uk.linkedin.com/pub/jon-skeet/0/800/ba3" 32 | } 33 | ] 34 | }; 35 | 36 | return svc; 37 | 38 | }]); -------------------------------------------------------------------------------- /src-samples/igniteui-angular-samples.njsproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Debug 5 | 2.0 6 | {67f9e854-0dd9-45a9-9253-5079166b847f} 7 | 8 | ProjectFiles 9 | app.js 10 | . 11 | . 12 | {3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{349c5851-65df-11da-9384-00065b846f21};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD} 13 | 11.0 14 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | False 36 | True 37 | 0 38 | / 39 | http://localhost:48022/ 40 | False 41 | True 42 | http://localhost:1337 43 | False 44 | 45 | 46 | 47 | 48 | 49 | 50 | CurrentPage 51 | True 52 | False 53 | False 54 | False 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | False 64 | False 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src-samples/grunt/lib/generator.js: -------------------------------------------------------------------------------- 1 | (function (module) { 2 | 3 | var 4 | path = require('path'), 5 | fs = require('fs-extra'), 6 | walk = require('walk'), 7 | _config = null; 8 | 9 | module.init = function (config) { 10 | var cwd = process.cwd(); 11 | 12 | _config = config; 13 | _config.paths.source = path.resolve(cwd, config.paths.source); 14 | _config.paths.destination = path.resolve(cwd, config.paths.destination); 15 | _config.paths.template = path.resolve(cwd, config.paths.template); 16 | _config.tokens = config.tokens || ['|title|', '|styles|', '|content|', '|scripts|']; 17 | }; 18 | 19 | module.generate = function (config, done) { 20 | 21 | if (!config) throw new Error('You must pass in the config options to generate files.'); 22 | if (!done) throw new Error('You need to pass a callback into generate so your script can continue once its done.'); 23 | 24 | if (_config === null) { 25 | module.init(config); 26 | } 27 | 28 | fs.removeSync(_config.paths.destination); 29 | fs.mkdirSync(_config.paths.destination); 30 | 31 | var options = { followLinks: false }; 32 | 33 | var getPropertyNameFromToken = function (token) { 34 | return token.match(/[a-zA-Z]/g).join('').toLowerCase(); 35 | }; 36 | 37 | var getContent = function (fileContents) { 38 | var content = {}; 39 | 40 | var extractText = function (token) { 41 | var contentArray = fileContents.split(token); 42 | return contentArray.length > 1 ? contentArray[1] : ''; 43 | }; 44 | 45 | _config.tokens.forEach(function (token) { 46 | var propertyName = getPropertyNameFromToken(token); 47 | content[propertyName] = extractText(token); 48 | }); 49 | 50 | return content; 51 | }; 52 | 53 | var stats = { 54 | filesCount: 0 55 | }; 56 | 57 | var 58 | fileContents = '', 59 | contents = '', 60 | finalContent = '', 61 | walker = null, 62 | template = fs.readFileSync(_config.paths.template, 'utf-8'); 63 | 64 | walker = walk.walk(_config.paths.source, options); 65 | 66 | walker.on("file", function (root, fileStats, next) { 67 | 68 | var 69 | filePath = path.join(root, fileStats.name), 70 | destinationPath = filePath.replace(_config.paths.source, _config.paths.destination); 71 | 72 | if (path.extname(filePath) === '.html') { 73 | var fileContents = fs.readFileSync(filePath, { encoding: 'utf-8' }); 74 | contents = getContent(fileContents); 75 | 76 | finalContent = template; 77 | _config.tokens.forEach(function (token) { 78 | if (finalContent.indexOf(token) > -1) { 79 | finalContent = finalContent.replace(token, contents[getPropertyNameFromToken(token)]); 80 | } 81 | }); 82 | 83 | fs.ensureFileSync(destinationPath); 84 | fs.writeFileSync(destinationPath, finalContent); 85 | stats.filesCount++; 86 | next(); 87 | } else { 88 | fs.copySync(filePath, destinationPath); 89 | stats.filesCount++; 90 | next(); 91 | } 92 | }); 93 | 94 | walker.on("errors", function (root, nodeStatsArray, next) { 95 | next(); 96 | }); 97 | 98 | walker.on("end", function () { 99 | stats.message = stats.filesCount + ' files created' 100 | done(stats); 101 | }); 102 | }; 103 | 104 | }(module.exports)); -------------------------------------------------------------------------------- /src-samples/src/igCombo.html: -------------------------------------------------------------------------------- 1 | |title|igCombo|title| 2 | 3 | |styles| 4 | 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igCombo

11 |
12 |
13 | TRY IT OUT: 14 |
15 |
    16 |
  • Enter a Product ID in the textbox and see how the combos change
    • 17 |
  • Change a product's name in the group of textboxes below and see how the names change in each combo
    • 18 |
19 |
20 |
21 |

This sample demonstrates how to use AngularJS directives to create igCombos.

22 |

Explore the Code

23 |
24 |
25 | 26 |
27 |
28 | 29 |
values: 1 - 20
30 |
31 |
32 | 33 | 41 | 42 | 43 |
44 |
45 | 46 | 54 | 55 | 56 |
57 |
58 | 59 |
60 |

Edit Product Name

61 |
62 | 63 |
64 | 65 |
66 | 67 |
68 |
69 | |content| 70 | 71 | |scripts| 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igHierarchicalGrid.html: -------------------------------------------------------------------------------- 1 | |title|igHierarchicalGrid|title| 2 | 3 | |styles| 4 | 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igHierarchicalGrid

11 | 12 |
13 |
14 |

This sample demonstrates how AngularJS directives are used to instantiate igHierarchicalGrid.

15 |

Explore the Code

16 |
17 |
18 | 19 |
20 |
21 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 |
51 |
52 | |content| 53 | 54 | |scripts| 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igTreeGrid.html: -------------------------------------------------------------------------------- 1 | |title|igTreeGrid|title| 2 | |styles| 3 | 4 | 5 | 6 | |styles| 7 | |content| 8 |
9 |

igTreeGrid

10 | 11 |
12 |
13 |

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

14 |

Explore the Code

15 |
16 |
17 | 18 |
19 |
20 | 21 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 |
44 | |content| 45 | 46 | |scripts| 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igEditors.html: -------------------------------------------------------------------------------- 1 | |title|Editors|title| 2 | 3 | |styles| 4 | 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igEditors

11 |
12 |
13 | TRY IT OUT: 14 |
15 |
    16 |
  • Enter a value in one of the editors
    • 17 |
  • Try to enter values that don't make sense (e.g., alpha characters in a numeric field) and observe the results
    • 18 |
19 |
20 |
21 |

This sample demonstrates how create a number of different editors using AngularJS directives.

22 |

Explore the Code

23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
Control NameHTML ElementIgnite UI Control
igCurrencyEditor
igDateEditor
igMaskEditor
igNumericEditor
igPercentEditor
igTextEditor
igDatePicker
72 |
73 | |content| 74 | 75 | |scripts| 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igMap.html: -------------------------------------------------------------------------------- 1 | |title|Map|title| 2 | 3 | |styles| 4 | 5 | 6 | 7 | |styles| 8 | 9 | |content| 10 |
11 |

igMap

12 |
13 |
14 | TRY IT OUT: 15 |
16 |
    17 |
  • Use the mouse wheel to zoom in on the map
    • 18 |
  • Click and drag or use the arrow keys to pan the map
    • 19 |
20 |
21 |
22 |

This sample demonstrates how create an igMap using an AngularJS directive.

23 |

Explore the Code

24 |
25 |
26 | 27 | 28 | 29 |
30 | |content| 31 | 32 | |scripts| 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igTileManager.html: -------------------------------------------------------------------------------- 1 | |title|Tile Manager|title| 2 | 3 | |styles| 4 | 5 | 6 | 7 | 63 | |styles| 64 | 65 | |content| 66 |
67 | 68 |

igTileManager

69 | 70 |
71 |
72 |

This sample demonstrates how AngularJS directives are used to instantiate igTileManager.

73 |

Explore the Code

74 |
75 |
76 |
77 |
78 | 89 | 90 |
91 |
92 |
93 | |content| 94 | 95 | |scripts| 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igHtmlEditor.html: -------------------------------------------------------------------------------- 1 | |title|HTML Editor|title| 2 | 3 | |styles| 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | |styles| 21 | 22 | |content| 23 |
24 |

igHtmlEditor

25 |
26 |
27 | TRY IT OUT: 28 |
29 |
    30 |
  • Change the content in the TEXTAREA on the right to see igHtmlEditor on the left updated
    • 31 |
32 |
33 |
34 |

This sample demonstrates how AngularJS directives are used with the igHtmlEditor to allow for one-way binding.

35 |

Explore the Code

36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 |
47 | |content| 48 | 49 | |scripts| 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | |scripts| -------------------------------------------------------------------------------- /samples/igUpload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Upload - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 39 |
40 |

igUpload

41 |
42 |
43 | TRY IT OUT: 44 |
45 |
    46 |
  • Click on the button to upload a file
    • 47 |
48 |
49 |
50 |

This sample demonstrates how create an igUpload using an AngularJS directive.

51 |

Note: There is no server configured with this sample, so uploads will fail.

52 |

Explore the Code

53 |
54 |
55 | 56 | 57 |
58 | 59 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /src-samples/src/igGrid-controller.html: -------------------------------------------------------------------------------- 1 | |title|igGrid Controller Options|title| 2 | 3 | |styles| 4 | 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igGrid

11 | 12 |
13 |
14 | TRY IT OUT: 15 |
16 |
    17 |
  • Add a new product either through the grid's UI or the form on the right of the grid
    • 18 |
  • Change a product's name in the group of textboxes below and see how the names change in the grid
    • 19 |
  • Delete a product either through the grid's UI or with the button next to each product in the table under the grid
    • 20 |
21 |
22 |
23 |

This sample demonstrates how Controller options are used with the igGrid directive to allow for two-way binding in the grid.

24 |

Explore the Code

25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 |
34 |

Add Product

35 |
36 | 37 | 38 | 39 | 40 |
41 | 42 |
43 |
44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
Product IDNameQuantity per unitUnit Price
{{product.ProductID}}{{product.QuantityPerUnit}}{{product.UnitPrice}}
67 |
68 | |content| 69 | 70 | |scripts| 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | |scripts| -------------------------------------------------------------------------------- /samples/igDialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | igDialog - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 37 | 38 |
39 |

igDialog

40 |
41 |
42 | TRY IT OUT: 43 |
44 |
    45 |
  • Drag the dialog around the page by the header
    • 46 |
  • Close the dialog and refresh the page to see it reappear
    • 47 |
48 |
49 |
50 |

This sample demonstrates how to declare an igDialog with an AngularJS directive.

51 |

Explore the Code 52 |

53 |
54 |
55 | 56 | 57 | 58 |

59 | 60 |

61 | 62 | 63 | 64 |
65 | 66 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /samples/igVideoPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | igVideoPlayer - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 37 | 38 |
39 |

igVideoPlayer

40 |
41 |
42 | TRY IT OUT: 43 |
44 |
    45 |
  • Play the video
    • 46 |
47 |
48 |
49 |

This sample demonstrates how create an igVideoPlayer with an AngularJS directive.

50 |

Explore the Code

51 |
52 |
53 | 54 | 55 | http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.h264.mp4 56 | http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.webmvp8.webm 57 | http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.theora.ogv 58 | 59 | 60 |
61 | 62 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /src-samples/src/igPivotGrid-FlatDataSource.html: -------------------------------------------------------------------------------- 1 | |title|igPivotGrid|title| 2 | |styles| 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 19 | |styles| 20 | |content| 21 |
22 |

igPivotGrid with Flat Data Source

23 | 24 |
25 |
26 |

This sample demonstrates how AngularJS directives are used with the igPivotGrid and Olap Flat Data Source.

27 |

Explore the Code

28 |
29 |
30 | 31 |
32 |
33 | 34 | 35 | 37 | 38 | 39 |
40 |
41 |
42 | |content| 43 | |scripts| 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igPivotGrid-XmlaDataSource.html: -------------------------------------------------------------------------------- 1 | |title|igPivotGrid|title| 2 | |styles| 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 19 | |styles| 20 | |content| 21 | 40 | 41 |
42 |

igPivotGrid with Xmla Data Source

43 | 44 |
45 |
46 |

This sample demonstrates how AngularJS directives are used with the igPivotGrid and Olap Xmla Data Source.

47 |

Explore the Code

48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 | 57 | 58 | 59 |
60 |
61 |
62 | |content| 63 | |scripts| 64 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igDataChart.html: -------------------------------------------------------------------------------- 1 | |title|Ignite UI Chart and Zoombar|title| 2 | 3 | |styles| 4 | 5 | 6 | 7 | |styles| 8 | 9 | |content| 10 |
11 |

igChart & igZoombar

12 |
13 |
14 | TRY IT OUT: 15 |
16 |
    17 |
  • Scroll the chart with the scroll bar
    • 18 |
  • Change the viewable area of the chart by dragging the handles inside the zoombar
    • 19 |
20 |
21 |
22 |

This sample demonstrates how to link together the igDataChart and igZoomBar using AngularJS directives.

23 |

Explore the Code 24 |

25 |
26 |
27 | 28 |
29 |
30 | 31 | 32 | 33 | 37 | 38 | 42 | 43 | 44 | 51 | 52 | 53 | 54 | 55 |
56 |
57 |
58 | |content| 59 | 60 | |scripts| 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | |scripts| -------------------------------------------------------------------------------- /samples/igCombo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | igCombo - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 39 |
40 |

igCombo

41 |
42 |
43 | TRY IT OUT: 44 |
45 |
    46 |
  • Enter a Product ID in the textbox and see how the combos change
    • 47 |
  • Change a product's name in the group of textboxes below and see how the names change in each combo
    • 48 |
49 |
50 |
51 |

This sample demonstrates how to use AngularJS directives to create igCombos.

52 |

Explore the Code

53 |
54 |
55 | 56 |
57 |
58 | 59 |
values: 1 - 20
60 |
61 |
62 | 63 | 71 | 72 | 73 |
74 |
75 | 76 | 84 | 85 | 86 |
87 |
88 | 89 |
90 |

Edit Product Name

91 |
92 | 93 |
94 | 95 |
96 | 97 |
98 |
99 | 100 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /src-samples/src/igGrid.html: -------------------------------------------------------------------------------- 1 | |title|igGrid: The Basics|title| 2 | 3 | |styles| 4 | 5 | 6 | |styles| 7 | 8 | |content| 9 |
10 |

igGrid

11 | 12 |
13 |
14 | TRY IT OUT: 15 |
16 |
    17 |
  • Add a new product either through the grid's UI or the form on the right of the grid
    • 18 |
  • Change a product's name in the group of textboxes below and see how the names change in the grid
    • 19 |
  • Delete a product either through the grid's UI or with the button next to each product in the table under the grid
    • 20 |
21 |
22 |
23 |

This sample demonstrates how AngularJS directives are used with the igGrid to allow for two-way binding in the grid.

24 |

Explore the Code

25 |
26 |
27 | 28 |
29 |
30 | 31 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
61 |
62 |

Add Product

63 |
64 | 65 | 66 | 67 | 68 |
69 | 70 |
71 |
72 | 73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
Product IDNameQuantity per unitUnit Price
{{product.ProductID}}{{product.QuantityPerUnit}}
95 | 104 |
105 | |content| 106 | 107 | |scripts| 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | |scripts| -------------------------------------------------------------------------------- /src-samples/src/igTree.html: -------------------------------------------------------------------------------- 1 | |title|igTree|title| 2 | 3 | |styles| 4 | 5 | |styles| 6 | 7 | |content| 8 |
9 |

igTree

10 |
11 |
12 | TRY IT OUT: 13 |
14 |
    15 |
  • Add and remove nodes from the tree using the buttons
    • 16 |
  • Edit product names and see how the tree responds
    • 17 |
18 |
19 |
20 |

This sample demonstrates how to create an igTree with an AngularJS directive.

21 |

Explore the Code

22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 |
37 |
Add a new root-level node
38 |
39 |
40 | 41 |
42 |
Add a new root-level node (by name)
43 |
44 |
45 |
46 |
47 | 48 | {{newProductCategory.ProductCategoryID = ProductCategories.length + 1}} 49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | 58 |
59 |
Remove the selected node from the tree
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 104 | 105 | 106 | 107 |
{{pc.ProductCategoryID}} 71 |
72 |
73 |
74 | 78 | {{newProductSubcategory.ProductSubcategoryID = pc.ProductSubcategories.length + 1}} 79 |
80 |
81 |
82 | 86 |
87 |
88 |
89 |
90 |
91 |
92 | 93 |
94 |
95 | 100 |
101 |
102 |
103 |
108 | 109 | 110 |
111 |
112 |
113 | |content| 114 | 115 | |scripts| 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | |scripts| -------------------------------------------------------------------------------- /samples/igHierarchicalGrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | igHierarchicalGrid - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 39 |
40 |

igHierarchicalGrid

41 | 42 |
43 |
44 |

This sample demonstrates how AngularJS directives are used to instantiate igHierarchicalGrid.

45 |

Explore the Code

46 |
47 |
48 | 49 |
50 |
51 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
80 |
81 |
82 | 83 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /src-samples/src/grid/master-detail/index.html: -------------------------------------------------------------------------------- 1 | |title|igGrid: Master/Detail|title| 2 | 3 | |styles| 4 | 5 | 6 | 11 | |styles| 12 | 13 | |content| 14 |
15 |

igGrid Master/Detail

16 |
Oops! There's been a problem: {{error}}
17 |
18 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 35 | 37 | 41 | 42 | 43 |
44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 | 56 |
57 |
58 |
59 | 60 |
61 | 66 |
67 |
68 |
69 | 70 |
71 | 76 |
77 |
78 |
79 | 80 |
81 | 86 |
87 |
88 |
89 | 90 |
91 | 96 |
97 |
98 |
99 | 100 |
101 | 106 |
107 |
108 |
109 | 110 |
111 | 115 |
116 |
117 |
118 |
119 | 120 | 121 |
122 |
123 |
124 |
125 |
126 |
127 | |content| 128 | 129 | 130 | |scripts| 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | |scripts| -------------------------------------------------------------------------------- /samples/igTileManager.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tile Manager - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 72 | 73 | 74 | 75 | 76 | 95 | 96 |
97 | 98 |

igTileManager

99 | 100 |
101 |
102 |

This sample demonstrates how AngularJS directives are used to instantiate igTileManager.

103 |

Explore the Code

104 |
105 |
106 |
107 |
108 | 118 | 119 |
120 |
121 |
122 | 123 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /samples/igTreeGrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | igTreeGrid - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 39 | 40 |
41 |

igTreeGrid

42 | 43 |
44 |
45 |

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

46 |

Explore the Code

47 |
48 |
49 | 50 |
51 |
52 | 53 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
74 |
75 |
76 | 77 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /test/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jasmine Spec Runner v2.0.0 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

igGrid

16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
{{newProduct.ProductID = northwind.length + 1}}
{{product.ProductID}}{{product.QuantityPerUnit}}{{product.UnitPrice}}
57 | 58 |

igTree

59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 80 | 81 | 82 | 83 |
{{newDataObject.ProductCategoryID = dataObject.length + 1}}
{{do.ProductCategoryID}} 77 |
{{newProductSubcategoriesObject.ProductSubcategoryID = do.ProductSubcategories.length + 1}}
78 |
79 |
84 | 85 |

igCombo

86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
95 | 100 | 101 | 102 | 103 | 104 |

igEditors

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
igCurrencyEditor
igDateEditor
igMaskEditor
igNumericEditor
igPercentEditor
igTextEditor
igDatePicker
igCheckboxEditor
141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /samples/igEditors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Editors - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 39 |
40 |

igEditors

41 |
42 |
43 | TRY IT OUT: 44 |
45 |
    46 |
  • Enter a value in one of the editors
    • 47 |
  • Try to enter values that don't make sense (e.g., alpha characters in a numeric field) and observe the results
    • 48 |
49 |
50 |
51 |

This sample demonstrates how create a number of different editors using AngularJS directives.

52 |

Explore the Code

53 |
54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 |
Control NameHTML ElementIgnite UI Control
igCurrencyEditor
igDateEditor
igMaskEditor
igNumericEditor
igPercentEditor
igTextEditor
igDatePicker
102 |
103 | 104 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /samples/igMap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Map - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 39 | 40 |
41 |

igMap

42 |
43 |
44 | TRY IT OUT: 45 |
46 |
    47 |
  • Use the mouse wheel to zoom in on the map
    • 48 |
  • Click and drag or use the arrow keys to pan the map
    • 49 |
50 |
51 |
52 |

This sample demonstrates how create an igMap using an AngularJS directive.

53 |

Explore the Code

54 |
55 |
56 | 57 | 58 | 59 |
60 | 61 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /samples/igHtmlEditor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML Editor - Ignite UI integration with AngularJS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 29 | 30 | 31 | 32 | 33 | 52 | 53 |
54 |

igHtmlEditor

55 |
56 |
57 | TRY IT OUT: 58 |
59 |
    60 |
  • Change the content in the TEXTAREA on the right to see igHtmlEditor on the left updated
    • 61 |
62 |
63 |
64 |

This sample demonstrates how AngularJS directives are used with the igHtmlEditor to allow for one-way binding.

65 |

Explore the Code

66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 |
77 | 78 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | --------------------------------------------------------------------------------