├── README.md ├── javascript-browserify ├── .gitignore ├── index.html ├── main.js └── package.json ├── javascript-webpack ├── core │ ├── .gitignore │ ├── index.html │ ├── main.js │ ├── package.json │ └── webpack.config.js └── pro │ ├── .gitignore │ ├── index.html │ ├── main.js │ ├── package.json │ └── webpack.config.js ├── kendoui-webpack-angularjs └── pro │ ├── .gitignore │ ├── index.html │ ├── main.js │ ├── package.json │ └── webpack.config.js └── typescript-webpack ├── core ├── .gitignore ├── index.html ├── main.ts ├── package.json ├── tsconfig.json ├── typings.json └── webpack.config.js └── pro ├── .gitignore ├── index.html ├── main.ts ├── package.json ├── tsconfig.json ├── typings.json └── webpack.config.js /README.md: -------------------------------------------------------------------------------- 1 | # Kendo UI Core NPM Package Usage Example 2 | 3 | The repository contains a preview of the Kendo UI Core and Kendo UI Professional NPM package usage.The packages contain the Kendo UI Scripts in commonjs module format. 4 | 5 | - The `javascript-browserify` directory shows how to use the NPM package with Browserify. 6 | - The `typescript-webpack` directory shows how to use the package with TypeScript and uses Webpack for the bundling. The setup includes typings configuration, too. 7 | - The `javascript-webpack` directory shows how to use jQuery Kendo UI with Webpack 8 | - The `kendoui-webpack-angularjs` directory shows how to use AngularJS Kendo UI widgets with Webpack 9 | 10 | ## Usage 11 | 12 | Clone the repository. Navigate to the directory of your choice and run `npm install`, followed by `npm start`. If the browser does not open automatically, go to [http://localhost:8080/](http://localhost:8080/). -------------------------------------------------------------------------------- /javascript-browserify/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bundle.js 3 | -------------------------------------------------------------------------------- /javascript-browserify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Kendo UI Loves NPM 5 | 6 | 7 | 8 | 9 | 10 |

Kendo UI Loves NPM

11 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /javascript-browserify/main.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery') 2 | require('kendo-ui-core'); 3 | // This works, too 4 | // require('kendo-ui-core/js/kendo.dropdownlist.js'); 5 | 6 | $("#ddl").kendoDropDownList(); 7 | -------------------------------------------------------------------------------- /javascript-browserify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kendo-npm-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "concurrently 'watchify main.js -o bundle.js' 'http-server'" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "kendo-ui-core": "^2016.2.518" 14 | }, 15 | "devDependencies": { 16 | "browserify": "^13.0.1", 17 | "concurrently": "^2.1.0", 18 | "http-server": "^0.9.0", 19 | "watchify": "^3.7.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /javascript-webpack/core/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | bundle.js 4 | bundle.js.map 5 | -------------------------------------------------------------------------------- /javascript-webpack/core/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World! 6 | 7 | 8 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /javascript-webpack/core/main.js: -------------------------------------------------------------------------------- 1 | $ = require("jquery"); 2 | require("kendo-ui-core/js/kendo.dropdownlist.js"); 3 | 4 | require("kendo-ui-core/css/web/kendo.common.core.min.css"); 5 | require("kendo-ui-core/css/web/kendo.default.min.css"); 6 | 7 | $("#sel").kendoDropDownList(); 8 | 9 | -------------------------------------------------------------------------------- /javascript-webpack/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server --inline --open" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "kendo-ui-core": "^2018.2.620" 15 | }, 16 | "devDependencies": { 17 | "file-loader": "0.10.0", 18 | "source-map-loader": "^0.1.5", 19 | "css-loader": "0.26.2", 20 | "style-loader": "0.13.1", 21 | "webpack": "^1.13.1", 22 | "webpack-dev-server": "^1.14.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /javascript-webpack/core/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./main.js", 3 | output: { 4 | filename: "./bundle.js", 5 | }, 6 | 7 | // Enable sourcemaps for debugging webpack's output. 8 | devtool: "source-map", 9 | 10 | module: { 11 | preLoaders: [ 12 | // Bundle resource files 13 | { test: /(\.png|\.gif|\.ttf|\.eot|\.woff|\.svg)/, loader: "file-loader" }, 14 | 15 | // Bundle stylesheets 16 | { test: /\.css$/, loader: "style-loader!css-loader" }, 17 | 18 | // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 19 | { test: /\.js$/, loader: "source-map-loader" } 20 | ] 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /javascript-webpack/pro/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | bundle.js 4 | bundle.js.map 5 | -------------------------------------------------------------------------------- /javascript-webpack/pro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World! 6 | 7 | 8 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /javascript-webpack/pro/main.js: -------------------------------------------------------------------------------- 1 | $ = require("jquery"); 2 | require("@progress/kendo-ui/js/kendo.dropdownlist.js"); 3 | 4 | require("@progress/kendo-ui/css/web/kendo.common.core.min.css"); 5 | require("@progress/kendo-ui/css/web/kendo.default.min.css"); 6 | 7 | $("#sel").kendoDropDownList(); 8 | 9 | -------------------------------------------------------------------------------- /javascript-webpack/pro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server --inline --open" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@progress/kendo-ui": "^2018.2.620" 15 | }, 16 | "devDependencies": { 17 | "file-loader": "0.10.0", 18 | "source-map-loader": "^0.1.5", 19 | "css-loader": "0.26.2", 20 | "style-loader": "0.13.1", 21 | "webpack": "^1.13.1", 22 | "webpack-dev-server": "^1.14.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /javascript-webpack/pro/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./main.js", 3 | output: { 4 | filename: "./bundle.js", 5 | }, 6 | 7 | // Enable sourcemaps for debugging webpack's output. 8 | devtool: "source-map", 9 | 10 | module: { 11 | preLoaders: [ 12 | // Bundle resource files 13 | { test: /(\.png|\.gif|\.ttf|\.eot|\.woff|\.svg)/, loader: "file-loader" }, 14 | 15 | // Bundle stylesheets 16 | { test: /\.css$/, loader: "style-loader!css-loader" }, 17 | 18 | // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 19 | { test: /\.js$/, loader: "source-map-loader" } 20 | ] 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /kendoui-webpack-angularjs/pro/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | bundle.js 4 | bundle.js.map 5 | -------------------------------------------------------------------------------- /kendoui-webpack-angularjs/pro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebPack, Kendo UI and AngularJS! 6 | 7 | 8 | 9 |

10 |

11 |

Select product

12 | 13 |

14 |
Selected items: {{ selectedItems }} 15 |

16 |

17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /kendoui-webpack-angularjs/pro/main.js: -------------------------------------------------------------------------------- 1 | angular = require("angular"); 2 | 3 | require("@progress/kendo-ui/js/kendo.multiselect.js"); 4 | require("@progress/kendo-ui/js/kendo.angular.js"); 5 | require("@progress/kendo-ui/css/web/kendo.bootstrap-v4.min.css"); 6 | 7 | angular.module("KendoDemos", ["kendo.directives"]) 8 | .controller("MyCtrl", function ($scope) { 9 | $scope.selectOptions = { 10 | placeholder: "Select products...", 11 | dataTextField: "ProductName", 12 | dataValueField: "ProductID", 13 | dataSource: { 14 | transport: { 15 | read: { 16 | url: "http://demos.telerik.com/kendo-ui/service/products", 17 | dataType: "jsonp" 18 | } 19 | } 20 | } 21 | }; 22 | $scope.selectedItems = [{ ProductName: "Chai", ProductID: 1 }]; 23 | }); 24 | -------------------------------------------------------------------------------- /kendoui-webpack-angularjs/pro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server --inline --open" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@progress/kendo-ui": "^2017.1.118", 15 | "angular" : "^1.6" 16 | }, 17 | "devDependencies": { 18 | "file-loader": "0.10.0", 19 | "source-map-loader": "^0.1.5", 20 | "css-loader": "0.26.2", 21 | "style-loader": "0.13.1", 22 | "webpack": "^1.13.1", 23 | "webpack-dev-server": "^1.14.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /kendoui-webpack-angularjs/pro/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var jquery = require("jquery"); 3 | 4 | module.exports = { 5 | entry: "./main.js", 6 | output: { 7 | filename: "./bundle.js", 8 | }, 9 | // Enable sourcemaps for debugging webpack's output. 10 | devtool: "source-map", 11 | plugins: [ 12 | new webpack.ProvidePlugin({ 13 | 'window.jQuery': 'jquery' 14 | }) 15 | ], 16 | module: { 17 | preLoaders: [ 18 | // Bundle resource files 19 | { test: /(\.png|\.gif|\.ttf|\.eot|\.woff|\.svg)/, loader: "file-loader" }, 20 | 21 | // Bundle stylesheets 22 | { test: /\.css$/, loader: "style-loader!css-loader" }, 23 | 24 | // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 25 | { test: /\.js$/, loader: "source-map-loader" } 26 | ] 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /typescript-webpack/core/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | bundle.js 4 | bundle.js.map 5 | -------------------------------------------------------------------------------- /typescript-webpack/core/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World! 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /typescript-webpack/core/main.ts: -------------------------------------------------------------------------------- 1 | import * as $ from "jquery"; 2 | import "kendo-ui-core"; 3 | 4 | $("#sel").kendoDropDownList(); -------------------------------------------------------------------------------- /typescript-webpack/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "postinstall": "typings install", 9 | "start": "webpack-dev-server --inline --open" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "kendo-ui-core": "^2017.2.621" 16 | }, 17 | "devDependencies": { 18 | "source-map-loader": "^0.1.5", 19 | "ts-loader": "^0.8.2", 20 | "typescript": "^1.8.10", 21 | "typings": "^1.0.4", 22 | "webpack": "^1.13.1", 23 | "webpack-dev-server": "^1.14.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /typescript-webpack/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "main.ts", 4 | "typings/index.d.ts" 5 | ], 6 | "compilerOptions": { 7 | "noImplicitAny": true, 8 | "target": "es5" 9 | } 10 | } -------------------------------------------------------------------------------- /typescript-webpack/core/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "dependencies": {}, 4 | "globalDependencies": { 5 | "jquery": "registry:dt/jquery#1.10.0+20160417213236", 6 | "kendo-ui": "registry:dt/kendo-ui#2016.1.314+20160518063453" 7 | } 8 | } -------------------------------------------------------------------------------- /typescript-webpack/core/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./main.ts", 3 | output: { 4 | filename: "./bundle.js", 5 | }, 6 | 7 | // Enable sourcemaps for debugging webpack's output. 8 | devtool: "source-map", 9 | 10 | resolve: { 11 | // Add '.ts' and '.tsx' as resolvable extensions. 12 | extensions: ["", ".ts", ".js"] 13 | }, 14 | 15 | module: { 16 | loaders: [ 17 | // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. 18 | { test: /\.ts?$/, loader: "ts-loader" } 19 | ], 20 | 21 | preLoaders: [ 22 | // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 23 | { test: /\.js$/, loader: "source-map-loader" } 24 | ] 25 | } 26 | }; -------------------------------------------------------------------------------- /typescript-webpack/pro/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | bundle.js 4 | bundle.js.map 5 | -------------------------------------------------------------------------------- /typescript-webpack/pro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World! 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /typescript-webpack/pro/main.ts: -------------------------------------------------------------------------------- 1 | import * as $ from "jquery"; 2 | import "@progress/kendo-ui/js/kendo.dropdownlist.js"; 3 | 4 | $("#sel").kendoDropDownList(); -------------------------------------------------------------------------------- /typescript-webpack/pro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "postinstall": "typings install", 9 | "start": "webpack-dev-server --inline --open" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "@progress/kendo-ui": "^2017.1.216", 16 | "kendo-ui-core": "^2016.2.603" 17 | }, 18 | "devDependencies": { 19 | "source-map-loader": "^0.1.5", 20 | "ts-loader": "^0.8.2", 21 | "typescript": "^1.8.10", 22 | "typings": "^1.0.4", 23 | "webpack": "^1.13.1", 24 | "webpack-dev-server": "^1.14.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /typescript-webpack/pro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "main.ts", 4 | "typings/index.d.ts" 5 | ], 6 | "compilerOptions": { 7 | "noImplicitAny": true, 8 | "target": "es5" 9 | } 10 | } -------------------------------------------------------------------------------- /typescript-webpack/pro/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm-ts-example", 3 | "dependencies": {}, 4 | "globalDependencies": { 5 | "jquery": "registry:dt/jquery#1.10.0+20160417213236", 6 | "kendo-ui": "registry:dt/kendo-ui#2016.1.314+20160518063453" 7 | } 8 | } -------------------------------------------------------------------------------- /typescript-webpack/pro/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./main.ts", 3 | output: { 4 | filename: "./bundle.js", 5 | }, 6 | 7 | // Enable sourcemaps for debugging webpack's output. 8 | devtool: "source-map", 9 | 10 | resolve: { 11 | // Add '.ts' and '.tsx' as resolvable extensions. 12 | extensions: ["", ".ts", ".js"] 13 | }, 14 | 15 | module: { 16 | loaders: [ 17 | // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. 18 | { test: /\.ts?$/, loader: "ts-loader" } 19 | ], 20 | 21 | preLoaders: [ 22 | // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 23 | { test: /\.js$/, loader: "source-map-loader" } 24 | ] 25 | } 26 | }; --------------------------------------------------------------------------------