Post
Ask Question

Complex Data Binding In Kendo Auto Complete For Angular 2

Introduction
 
In my previous article we saw how to implement the Kendo auto complete control for Angular 2.  To explain how to use the complex data binding in Kendo auto complete for angular 2  we are going to use same application which was created in my previous article, so please go through my previous article before going through this blog.
 
Complex Data Binding in Kendo Auto Complete for Angular 2
 
The valueField property used in Kendo autocomplete is to handle the complex data binding. 
 
dropdown-autocomplete.compoenent.html 
  1. <h3>Dropdown-AutoComplete</h3>  
  2.   
  3. <kendo-autocomplete  
  4. [data]="countryList"  
  5.             [placeholder]="'e.g. India'"  
  6.                     [valueField]="'text'"  
  7.   
  8.   
  9.  >  
  10.     <template kendoAutoCompleteHeaderTemplate>  
  11.         <h4>Countries</h4>  
  12.     </template>  
  13.     <template kendoAutoCompleteFooterTemplate>  
  14.         <h4>Total: {{countryList.length}} countries</h4>  
  15.     </template>  
  16.     <template kendoDropDownListNoDataTemplate>  
  17.         <h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>  
  18.     </template>  
  19. </kendo-autocomplete>   
From the above code it is obvious we have used valueField property to bind the text value from the complex array countryList.
 
dropdown-autocomplete.compoenent.ts  
  1. import { Component, OnInit, Inject } from '@angular/core';  
  2. import { Jsonp, JsonpModule } from '@angular/http';  
  3. import { DataService } from './DataService';  
  4. import { Employee } from './employee.model';  
  5.   
  6.   
  7. @Component({  
  8.   selector: 'app-dropdown-autocomplete',  
  9.   templateUrl: './dropdown-autocomplete.component.html',  
  10.   styleUrls: ['./dropdown-autocomplete.component.scss'],  
  11.   styles: ['.k-i-warning { font-size: 2.5em; } h4 { font-size: 1em;}'],  
  12.   providers: [DataService]  
  13. })  
  14. export class DropdownAutocompleteComponent implements OnInit {  

  16. public countryList : Array<{ text: string, value: string }> = [{ text: "India", value: "IND" }, { text: "China", value: "CHI" }, { text: "Australia", value: "AUS" }]  
  17.       
  18.   ngOnInit() {  
  19.   
  20.   }  
  21.   
  22. }  
The complex array countryList  is defined in the above dropdown-autocomplete.compoenent typescript. 
 
Use ng serve to build our application.  
 
Result in Browser
 
 
I hope you have enjoyed this blog. Your valuable feedback, questions, and comments about this blog are always welcome.