Angular 4 Kendo UI Grids

Angular 4 Kendo UI Grids - [Kendo UI Grid in Angular 4 Project?

How To Use Kendo UI Grid in Angular 4 Project?

Step 1 - Download and install the package
npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @angular/animations

Step 2 - Once installed, import the GridModule in your application root module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';

   bootstrap:    [AppComponent],
   declarations: [AppComponent],
   imports:      [BrowserModule, BrowserAnimationsModule, GridModule]
export class AppModule {

Example - AppComponent
import { Component } from '@angular/core';

    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" [height]="410">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            <kendo-grid-column field="ProductName" title="Name" width="250">
            <kendo-grid-column field="Category.CategoryName" title="Category">
            <kendo-grid-column field="UnitPrice" title="Price" width="80">
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
export class AppComponent {
    products = [
        "ProductID": 1,
        "ProductName": "Product 1",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 phones",
        "UnitPrice": 1000,
        "UnitsInStock": 23,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": true,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "phones",
            "Description": "black, white, dark"

    private gridData: any[] = products;

Result -

I hope you are enjoying with this post! Please share with you friends. Thank you so much!


Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book