Angular 4 and 5 Grid Kendo UI

Angular 4 and 5 Kendo UI Grid and Examples


The Angular Kendo Grid is used to displays the data in a tabular format and also provides a full spectrum of configuration options.

Angular Kendo Grid contains the many advance features which are available in the below sections.

Download and install the Kendo Grid 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

Once installed, import the GridModule (@progress/kendo-angular-grid) in your application root module -
//app/ng.module.ts
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';

@NgModule({
  imports: [ BrowserModule,
             BrowserAnimationsModule,
             GridModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Example looks like -
//app/app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h2>Product List - </h2>
        <kendo-grid [data]="gridData" [height]="410">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Product" width="250">
            </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">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
 
    private gridData: any[] = [
      {
        "ProductID": 1,
        "ProductName": "Wheat - Food Item",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "520 bags",
        "UnitPrice": 5000.00,
        "UnitsInStock": 480,
        "UnitsOnOrder": 6594,
        "ReorderLevel": 1,
        "Discontinued": true,
        "Category": {
            "CategoryID": 1,
            "Name": "Wheat Foods",
            "Description": "Wheat is a grass widely cultivated for its seed, a cereal grain which is a worldwide staple food. There are many species of wheat which together make up the genus Triticum; the most widely grown is common wheat"
        }
      }, {
          "ProductID": 2,
          "ProductName": "Rice  - Food Item",
          "SupplierID": 1,
          "CategoryID": 1,
          "QuantityPerUnit": "500 bags",
          "UnitPrice": 6000.00,
          "UnitsInStock": 17,
          "UnitsOnOrder": 2322,
          "ReorderLevel": 2,
          "Discontinued": false,
          "Category": {
              "CategoryID": 1,
              "Name": "Rice Foods",
              "Description": "Rice is the seed of the grass species Oryza sativa or Oryza glaberrima. As a cereal grain, it is the most widely consumed staple food for a large part of the world's human population, especially in Asia"
          }
      }];
}


And
//app/ng.module.ts
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';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, GridModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Result looks like - http://embed.plnkr.co/XvwaCo/

The Kendo UI Features – The keno UI proved multiple features and it looks like
ü  Data operations
ü  Data binding
ü  Filtering
ü  Grouping
ü  Paging
ü  Sorting
ü  Context menu
ü  Detail row template
ü  Toolbar template
ü  Hierarchy
ü  Responsive design
ü  Row reordering
ü  Export options
ü  Excel export
ü  PDF export
ü  Editing
ü  Globalization
ü  Right-to-left content rendering
ü  Scroll modes
ü  Selection
ü  Styling of cells and rows
For more detail, visit on kendo site - https://www.telerik.com/kendo-angular-ui/  

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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^