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.
Content
- Setup Kendo UI for an Angular 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
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
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.
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { FormsModule } from '@angular/forms';
- import { HttpModule, JsonpModule } from '@angular/http';
-
-
- 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,
-
- 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
- http://www.telerik.com/kendo-angular-ui/getting-started
- 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.