“How To Use Kendo UI Grid with Angular 2”?
The Kendo UI Grid is used to displays data in a tabular format and provides a full configurations options and the following example of Kendo Grid as given below,
Example as Source code as,
import { Component } from '@angular/core'; import { products } from './products'; @Component({ selector: 'my-app', template: ` <kendo-grid [data]="gridData" [height]="370"> <kendo-grid-column field="ProductID" title="ID" width="40"> </kendo-grid-column> <kendo-grid-column field="ProductName" title="Name" width="250"> </kendo-grid-column> <kendo-grid-column field="Category.CategoryName" title="Category"> </kendo-grid-column> <kendo-grid-column field="UnitPrice" title="Price" width="80"> </kendo-grid-column> <kendo-grid-column field="UnitsInStock" title="In stock" width="80"> </kendo-grid-column> <kendo-grid-column field="Discontinued" title="Discontinued" width="120"> <template kendoGridCellTemplate let-dataItem> <input type="checkbox" [checked]="dataItem.Discontinued" disabled/> </template> </kendo-grid-column> </kendo-grid> ` }) export class AppComponent { private gridData: any[] = products; }
App Module source code as,
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { GridModule } from '@progress/kendo-angular-grid'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, GridModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
Sample Product list as,
export const sampleProducts = [{ "ProductID" : 24, "ProductName" : "Guaraná Fantástica", "SupplierID" : 10, "CategoryID" : 1, "QuantityPerUnit" : "12 - 355 ml cans", "UnitPrice" : 4.5000, "UnitsInStock" : 20, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : true, "Category" : { "CategoryID" : 1, "CategoryName" : "Beverages", "Description" : "Soft drinks, coffees, teas, beers, and ales" } }, { "ProductID" : 25, "ProductName" : "NuNuCa Nuß-Nougat-Creme", "SupplierID" : 11, "CategoryID" : 3, "QuantityPerUnit" : "20 - 450 g glasses", "UnitPrice" : 14.0000, "UnitsInStock" : 76, "UnitsOnOrder" : 0, "ReorderLevel" : 30, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 26, "ProductName" : "Gumbär Gummibärchen", "SupplierID" : 11, "CategoryID" : 3, "QuantityPerUnit" : "100 - 250 g bags", "UnitPrice" : 31.2300, "UnitsInStock" : 15, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 47, "ProductName" : "Zaanse koeken", "SupplierID" : 22, "CategoryID" : 3, "QuantityPerUnit" : "10 - 4 oz boxes", "UnitPrice" : 9.5000, "UnitsInStock" : 36, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 48, "ProductName" : "Chocolade", "SupplierID" : 22, "CategoryID" : 3, "QuantityPerUnit" : "10 pkgs.", "UnitPrice" : 12.7500, "UnitsInStock" : 15, "UnitsOnOrder" : 70, "ReorderLevel" : 25, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 49, "ProductName" : "Maxilaku", "SupplierID" : 23, "CategoryID" : 3, "QuantityPerUnit" : "24 - 50 g pkgs.", "UnitPrice" : 20.0000, "UnitsInStock" : 10, "UnitsOnOrder" : 60, "ReorderLevel" : 15, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 50, "ProductName" : "Valkoinen suklaa", "SupplierID" : 23, "CategoryID" : 3, "QuantityPerUnit" : "12 - 100 g bars", "UnitPrice" : 16.2500, "UnitsInStock" : 65, "UnitsOnOrder" : 0, "ReorderLevel" : 30, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 51, "ProductName" : "Manjimup Dried Apples", "SupplierID" : 24, "CategoryID" : 7, "QuantityPerUnit" : "50 - 300 g pkgs.", "UnitPrice" : 53.0000, "UnitsInStock" : 20, "UnitsOnOrder" : 0, "ReorderLevel" : 10, "Discontinued" : false, "Category" : { "CategoryID" : 7, "CategoryName" : "Produce", "Description" : "Dried fruit and bean curd" } }, { "ProductID" : 52, "ProductName" : "Filo Mix", "SupplierID" : 24, "CategoryID" : 5, "QuantityPerUnit" : "16 - 2 kg boxes", "UnitPrice" : 7.0000, "UnitsInStock" : 38, "UnitsOnOrder" : 0, "ReorderLevel" : 25, "Discontinued" : false, "Category" : { "CategoryID" : 5, "CategoryName" : "Grains/Cereals", "Description" : "Breads, crackers, pasta, and cereal" } }, { "ProductID" : 53, "ProductName" : "Perth Pasties", "SupplierID" : 24, "CategoryID" : 6, "QuantityPerUnit" : "48 pieces", "UnitPrice" : 32.8000, "UnitsInStock" : 0, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : true, "Category" : { "CategoryID" : 6, "CategoryName" : "Meat/Poultry", "Description" : "Prepared meats" } }, { "ProductID" : 54, "ProductName" : "Tourtière", "SupplierID" : 25, "CategoryID" : 6, "QuantityPerUnit" : "16 pies", "UnitPrice" : 7.4500, "UnitsInStock" : 21, "UnitsOnOrder" : 0, "ReorderLevel" : 10, "Discontinued" : false, "Category" : { "CategoryID" : 6, "CategoryName" : "Meat/Poultry", "Description" : "Prepared meats" } }, { "ProductID" : 55, "ProductName" : "Pâté chinois", "SupplierID" : 25, "CategoryID" : 6, "QuantityPerUnit" : "24 boxes x 2 pies", "UnitPrice" : 24.0000, "UnitsInStock" : 115, "UnitsOnOrder" : 0, "ReorderLevel" : 20, "Discontinued" : false, "Category" : { "CategoryID" : 6, "CategoryName" : "Meat/Poultry", "Description" : "Prepared meats" } }, { "ProductID" : 56, "ProductName" : "Gnocchi di nonna Alice", "SupplierID" : 26, "CategoryID" : 5, "QuantityPerUnit" : "24 - 250 g pkgs.", "UnitPrice" : 38.0000, "UnitsInStock" : 21, "UnitsOnOrder" : 10, "ReorderLevel" : 30, "Discontinued" : false, "Category" : { "CategoryID" : 5, "CategoryName" : "Grains/Cereals", "Description" : "Breads, crackers, pasta, and cereal" } }, { "ProductID" : 57, "ProductName" : "Ravioli Angelo", "SupplierID" : 26, "CategoryID" : 5, "QuantityPerUnit" : "24 - 250 g pkgs.", "UnitPrice" : 19.5000, "UnitsInStock" : 36, "UnitsOnOrder" : 0, "ReorderLevel" : 20, "Discontinued" : false, "Category" : { "CategoryID" : 5, "CategoryName" : "Grains/Cereals", "Description" : "Breads, crackers, pasta, and cereal" } }, { "ProductID" : 58, "ProductName" : "Escargots de Bourgogne", "SupplierID" : 27, "CategoryID" : 8, "QuantityPerUnit" : "24 pieces", "UnitPrice" : 13.2500, "UnitsInStock" : 62, "UnitsOnOrder" : 0, "ReorderLevel" : 20, "Discontinued" : false, "Category" : { "CategoryID" : 8, "CategoryName" : "Seafood", "Description" : "Seaweed and fish" } }, { "ProductID" : 59, "ProductName" : "Raclette Courdavault", "SupplierID" : 28, "CategoryID" : 4, "QuantityPerUnit" : "5 kg pkg.", "UnitPrice" : 55.0000, "UnitsInStock" : 79, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 4, "CategoryName" : "Dairy Products", "Description" : "Cheeses" } }, { "ProductID" : 60, "ProductName" : "Camembert Pierrot", "SupplierID" : 28, "CategoryID" : 4, "QuantityPerUnit" : "15 - 300 g rounds", "UnitPrice" : 34.0000, "UnitsInStock" : 19, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 4, "CategoryName" : "Dairy Products", "Description" : "Cheeses" } }, { "ProductID" : 61, "ProductName" : "Sirop d'érable", "SupplierID" : 29, "CategoryID" : 2, "QuantityPerUnit" : "24 - 500 ml bottles", "UnitPrice" : 28.5000, "UnitsInStock" : 113, "UnitsOnOrder" : 0, "ReorderLevel" : 25, "Discontinued" : false, "Category" : { "CategoryID" : 2, "CategoryName" : "Condiments", "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings" } }, { "ProductID" : 62, "ProductName" : "Tarte au sucre", "SupplierID" : 29, "CategoryID" : 3, "QuantityPerUnit" : "48 pies", "UnitPrice" : 49.3000, "UnitsInStock" : 17, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 63, "ProductName" : "Vegie-spread", "SupplierID" : 7, "CategoryID" : 2, "QuantityPerUnit" : "15 - 625 g jars", "UnitPrice" : 43.9000, "UnitsInStock" : 24, "UnitsOnOrder" : 0, "ReorderLevel" : 5, "Discontinued" : false, "Category" : { "CategoryID" : 2, "CategoryName" : "Condiments", "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings" } }, { "ProductID" : 64, "ProductName" : "Wimmers gute Semmelknödel", "SupplierID" : 12, "CategoryID" : 5, "QuantityPerUnit" : "20 bags x 4 pieces", "UnitPrice" : 33.2500, "UnitsInStock" : 22, "UnitsOnOrder" : 80, "ReorderLevel" : 30, "Discontinued" : false, "Category" : { "CategoryID" : 5, "CategoryName" : "Grains/Cereals", "Description" : "Breads, crackers, pasta, and cereal" } }, { "ProductID" : 65, "ProductName" : "Louisiana Fiery Hot Pepper Sauce", "SupplierID" : 2, "CategoryID" : 2, "QuantityPerUnit" : "32 - 8 oz bottles", "UnitPrice" : 21.0500, "UnitsInStock" : 76, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 2, "CategoryName" : "Condiments", "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings" } }, { "ProductID" : 66, "ProductName" : "Louisiana Hot Spiced Okra", "SupplierID" : 2, "CategoryID" : 2, "QuantityPerUnit" : "24 - 8 oz jars", "UnitPrice" : 17.0000, "UnitsInStock" : 4, "UnitsOnOrder" : 100, "ReorderLevel" : 20, "Discontinued" : false, "Category" : { "CategoryID" : 2, "CategoryName" : "Condiments", "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings" } }, { "ProductID" : 67, "ProductName" : "Laughing Lumberjack Lager", "SupplierID" : 16, "CategoryID" : 1, "QuantityPerUnit" : "24 - 12 oz bottles", "UnitPrice" : 14.0000, "UnitsInStock" : 52, "UnitsOnOrder" : 0, "ReorderLevel" : 10, "Discontinued" : false, "Category" : { "CategoryID" : 1, "CategoryName" : "Beverages", "Description" : "Soft drinks, coffees, teas, beers, and ales" } }, { "ProductID" : 68, "ProductName" : "Scottish Longbreads", "SupplierID" : 8, "CategoryID" : 3, "QuantityPerUnit" : "10 boxes x 8 pieces", "UnitPrice" : 12.5000, "UnitsInStock" : 6, "UnitsOnOrder" : 10, "ReorderLevel" : 15, "Discontinued" : false, "Category" : { "CategoryID" : 3, "CategoryName" : "Confections", "Description" : "Desserts, candies, and sweet breads" } }, { "ProductID" : 69, "ProductName" : "Gudbrandsdalsost", "SupplierID" : 15, "CategoryID" : 4, "QuantityPerUnit" : "10 kg pkg.", "UnitPrice" : 36.0000, "UnitsInStock" : 26, "UnitsOnOrder" : 0, "ReorderLevel" : 15, "Discontinued" : false, "Category" : { "CategoryID" : 4, "CategoryName" : "Dairy Products", "Description" : "Cheeses" } }, { "ProductID" : 70, "ProductName" : "Outback Lager", "SupplierID" : 7, "CategoryID" : 1, "QuantityPerUnit" : "24 - 355 ml bottles", "UnitPrice" : 15.0000, "UnitsInStock" : 15, "UnitsOnOrder" : 10, "ReorderLevel" : 30, "Discontinued" : false, "Category" : { "CategoryID" : 1, "CategoryName" : "Beverages", "Description" : "Soft drinks, coffees, teas, beers, and ales" } }, { "ProductID" : 71, "ProductName" : "Flotemysost", "SupplierID" : 15, "CategoryID" : 4, "QuantityPerUnit" : "10 - 500 g pkgs.", "UnitPrice" : 21.5000, "UnitsInStock" : 26, "UnitsOnOrder" : 0, "ReorderLevel" : 0, "Discontinued" : false, "Category" : { "CategoryID" : 4, "CategoryName" : "Dairy Products", "Description" : "Cheeses" } }];
HTML code for Kendo UI Grid with Angular 2 as,
<!DOCTYPE html> <html> <head> <title>Kendo UI Grid with Angular 2</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="http://www.telerik.com/kendo-angular-ui/npm/node_modules//@progress/kendo-theme-default/dist/all.css" /> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="https://unpkg.com/core-js/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3"></script> <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> <!-- Example-specific styles --> <style> html, body { overflow: hidden; } body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; } my-app { display: block; width: 100%; overflow: hidden; min-height: 80px; box-sizing: border-box; padding: 30px; } my-app > .k-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .example-wrapper { min-height: 280px; } .example-wrapper p, .example-col p { margin: 0 0 10px; } .example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; } .example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; } .example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); } </style> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
References,
I hope you are enjoying with this post! Please share with
you friends. Thank you!!