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 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..
|
