python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions