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!