Remote Data Binding In Kendo Combo Box For Angular 2

Introduction

This article tells you how to implement remote data binding in Kendo combo box for Agular 2 from Kendo dropdown package. Before going through this article, I strongly recommend  reading my previous article, where I have explained how to implement the Kendo combo box for Angular 2.

Combo box displays a list of options as well as it allows the user to pick a value from the list or to enter the custom value.

Please check on the list of Kendo UI component for Angular 2

Content

1. Setup Kendo UI for an Angular 2.
2. Configuring Kendo Combo box control with remote databinding for an Angular 2.

Quick setup of Kendo UI for Angular 2

Before going to the initial setup of the project, just make sure that the latest versions of Node.js and NPM are installed in your system

Step 1

Install Angular-CLI package, open the command prompt and write the command given below to install Angular CLI package

npm install -g @angular-cli

Step 2

Go to the respective directory, where you need to save your project and give the command given below in the command prompt to create a project.

ng new kendodropdown --style=scss

Kendodropdown is our project name.

The project structure is given which is opened in Visual Studio.

Kendo dropdown package, which is installed recently, as shown in the below figure

Step 3

To associate the progress of NPM registry with the @progress scope, run the command given below.

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

NPM will ask you for telerik account credential and an email. If you are not an existing user, try to create a new telerik account.

Configuring Kendo auto complete control with remote data binding for an Angular 2

Step 4

Let’s create a new component. In this article, we are going to see Kendo combo box for an Angular 2. To use the control, first we need to install Kendo dropdown module, and give the command given below to install Kendo dropdowns.

npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-l10n @angular/animations

Step 5

In this step we are going to create a model, right click on the app folder and add new typescript file, in my case I named it technologies.model.ts

Technologies.model.ts

export class Technolgy {
    constructor(
        public value?: number,
        public text?: string,

    ) { }
}

Step 6

In this step we are going to create a service file, right click on the app folder and add new typescript file, in my case I named it as data.service.ts

Data.service.ts

import { Injectable, Inject } from '@angular/core';
import { Jsonp, JsonpModule, Http, Response } from '@angular/http';
import { Technolgy } from './technologies.model';
import { Observable,BehaviorSubject } from 'rxjs/Rx';

 @Injectable()
 export class DataService {

     constructor(private http: Http) {
     }

     extractData(res: Response) {
         return res.json();
     }

     getList(): Observable<Technolgy[]> {
         return this.http.get('http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList').map(this.extractData)     }
}

I'm going to use the API response given below to construct my remote datasource for Kendo combo Box which was created in my previous article.

API - http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList

Type - GET.

Testing the APIs, using POSTMAN.

Step 7

Open app.module.ts file and add the information of Kendo dropdowns, which are installed.

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';

// Import the Animations module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
      HttpModule,
      // Register the modules
      BrowserAnimationsModule,
        JsonpModule,
      DropDownsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 8

Open app.compoenent.ts and write the code given below in it.

app.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Technolgy } from './technologies.model';
import { DataService  } from './data.service';

@Component({
  selector: 'app-combobox',
  styleUrls: ['./app.component.scss'],
  providers: [DataService],
    template: `
    <h1>{{title}}</h1>
    <div class="example-wrapper">
  <p>Favorite Technolgy:</p>
         <kendo-combobox
             [data]="listItems"
             [textField]="'text'"
             [valueField]="'value'"
           >
        </kendo-combobox>
        </div>
     `
})
 export class AppComponent {
     title = 'Kendo Combo Box';

     public listItems: Array<Technolgy> = [];
     constructor(private dataService: DataService) {
      }

     ngOnInit() {
         this.dataService.getList().subscribe(
             (data) => this.listItems = data
         )

     }
 }

Technology and dataservice are imported in this component, and we have declared the listItem which is an array of technology type where our API response is loaded.

Step 9

Configure the theme

In this step, we are going to install Kendo default theme into our Application. Use the command given below to install the theme

npm install --save @progress/kendo-theme-default

Open the style.scss and write the code given below in it.

@import "~@progress/kendo-theme-default/scss/all"

The code given above is used to integrate Kendo's default theme into our Application.

Step 10

Build the Application

Use the command given below to build and run the Application.

ng-serve

Result

 

 

References

1. http://www.telerik.com/kendo-angular-ui/getting-started
2. http://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/data-binding/
   

I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.

 

Download source code here