“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!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|