Post
Ask Question

Understanding Kendo Grid in Angular

Introduction

Kendo UI Grid is a powerful and flexible component for displaying data in an Angular application. It offers features like filtering, sorting, paging, and editing, making it a great choice for handling large datasets. Here’s a step-by-step guide on how to set up and use Kendo Grid in an Angular project.

1. Setting up the Angular project

First, create a new Angular project if you don't already have one. You can skip this step if you are integrating Kendo Grid into an existing project.

ng new kendo-grid-angular-app
cd kendo-grid-angular-app

2. Installing Kendo UI for Angular

You need to install the Kendo UI packages. You can do this by adding the following dependencies.

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-common @progress/kendo-angular-l10n @progress/kendo-angular-dateinputs @progress/kendo-angular-intl @progress/kendo-angular-popup @progress/kendo-data-query @progress/kendo-licensing @angular/animations

3. Importing Kendo UI modules

Open your app.module.ts file and import the Kendo UI Grid module along with other necessary modules.

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({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    GridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Adding Kendo Grid to a component

Next, open your app.component.ts file and add some sample data for the grid.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public gridData: any[] = [
    { ProductID: 1, ProductName: 'Chai', Category: 'Beverages', Price: 18 },
    { ProductID: 2, ProductName: 'Chang', Category: 'Beverages', Price: 19 },
    { ProductID: 3, ProductName: 'Aniseed Syrup', Category: 'Condiments', Price: 10 },
    // Add more data as needed
  ];
}

Then, modify your app.component.html to include the Kendo Grid component.

<kendo-grid [data]="gridData">
  <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name" width="250"></kendo-grid-column>
  <kendo-grid-column field="Category" title="Category" width="150"></kendo-grid-column>
  <kendo-grid-column field="Price" title="Price" width="120"></kendo-grid-column>
</kendo-grid>

5. Adding Kendo UI styles

Include the Kendo UI theme in your angular.json file. Add the following line to the styles array.

"styles": [
  "src/styles.css",
  "node_modules/@progress/kendo-theme-default/dist/all.css"
]

6. Additional configurations

You can further customize the Kendo Grid by adding features like sorting, filtering, paging, and more. For example, to enable sorting and paging, you can modify your app.component.html as follows.

<kendo-grid
  [data]="gridData"
  [sortable]="true"
  [pageable]="true"
  [pageSize]="10"
  [skip]="0">
  <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name" width="250"></kendo-grid-column>
  <kendo-grid-column field="Category" title="Category" width="150"></kendo-grid-column>
  <kendo-grid-column field="Price" title="Price" width="120"></kendo-grid-column>
</kendo-grid>

7. Running the application

Run your Angular application using the Angular CLI.

ng serve

Navigate to http://localhost:4200 in your web browser. You should see the Kendo Grid displaying your sample data.

Conclusion

These steps outline the basic integration of the Kendo UI Grid in an Angular application. Kendo UI for Angular offers many more features and configurations that you can explore in the official documentation.


Similar Articles