Angular

Working With Templates And Events In Kendo Combo Box For Angular

Introduction

In my previous article, I have discussed about remote data binding in the Kendo combo box for Angular 2. This article is in continuation of that. Here,  I’m going to discuss how to use the events and templates in Kendo combo box.

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

Content

  • Filter an event in Kendo Combo box
  • Template in Kendo Combo Box

Filter Event in Kendo Combo box

Before Implementing the filtering event, we need to set a filtering property as true for the Kendo Combo box.

  1. import { Component, OnInit, Inject, ViewChild } from '@angular/core';  
  2. import { Jsonp, JsonpModule } from '@angular/http';  
  3. import { Observable } from 'rxjs/Rx';  
  4. import { Technolgy } from './technologies.model';  
  5. import { DataService  } from './data.service';  
  6. import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';  
  7.   
  8. interface Item {  
  9.   text?: string,  
  10.   value?: number  
  11. }  
  12.   
  13. @Component({  
  14.   selector: 'app-combobox',  
  15.   styleUrls: ['./app.component.scss'],  
  16.   providers: [DataService],  
  17.     template: `  
  18.   
  19.     <h1>{{title}}</h1>  
  20.     <div class="example-config">  
  21.         Selected Item: {{selectedItem}}  
  22.     </div>  
  23.     <div class="example-wrapper">  
  24.   <p>Favorite Technolgy:</p>  
  25.          <kendo-combobox  
  26.           #combo  
  27.              [data]="listItems"  
  28.              [textField]="'text'"  
  29.              [valueField]="'value'"  
  30.               [valuePrimitive]="true"            
  31.              [(ngModel)]="selectedItem"  
  32.               [filterable]="true"  
  33.              (filterChange)="handleFilter($event)"  
  34.            >  
  35.             
  36.         </kendo-combobox>  
  37.         </div>  
  38.      `  
  39. })  
  40.  export class AppComponent {  
  41.        @ViewChild('combo') public combo: ComboBoxComponent;  
  42.      title = 'Kendo Combo Box';  
  43.   
  44.      public listItems: Array<Technolgy> = [];  
  45.      constructor(private dataService: DataService) {  
  46.       }  
  47.   
  48.      ngOnInit() {  
  49.          this.dataService.getList().subscribe(  
  50.              (data) => this.listItems = data            
  51.          )  
  52.   
  53.      }  
  54.      public selectedItem: number=1;  
  55.      handleFilter(value) {  
  56.          alert("Filter Event")  
  57.      }  
  58.  }   

From the above code, you can notice the following changes -

  1. We have set the filter property as true.
  2. handleFilter is the filter event definition which is fired when the user modifies input value.
Result


Figure 1  

Templates in Kendo Combo box for Angular 2

Kendo combo box consists of four template,

  1. Header Template
  2. Footer Template
  3. Item Template
  4. No data Template   

Header Template

Use this template if you need to add the header to the kendo combo box list items. To define a header template, nest an <ng-template> tag with a kendoComboBoxHeaderTemplate directive inside a <kendo-combobox> tag.

  1. import { Component, OnInit, Inject, ViewChild } from '@angular/core';  
  2. import { Jsonp, JsonpModule } from '@angular/http';  
  3. import { Observable } from 'rxjs/Rx';  
  4. import { Technolgy } from './technologies.model';  
  5. import { DataService  } from './data.service';  
  6. import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';  
  7.   
  8. interface Item {  
  9.   text?: string,  
  10.   value?: number  
  11. }  
  12.   
  13. @Component({  
  14.   selector: 'app-combobox',  
  15.   styleUrls: ['./app.component.scss'],  
  16.   providers: [DataService],  
  17.     template: `  
  18.   
  19.     <h1>{{title}}</h1>  
  20.     <div class="example-config">  
  21.         Selected Item: {{selectedItem}}  
  22.     </div>  
  23.     <div class="example-wrapper">  
  24.   <p>Favorite Technolgy:</p>  
  25.          <kendo-combobox  
  26.           #combo  
  27.              [data]="listItems"  
  28.              [textField]="'text'"  
  29.              [valueField]="'value'"  
  30.               [valuePrimitive]="true"            
  31.              [(ngModel)]="selectedItem"  
  32.               [filterable]="true"  
  33.              (filterChange)="handleFilter($event)"  
  34.            >  
  35.           <ng-template kendoComboBoxHeaderTemplate>  
  36.             <h4>Technolgy</h4>  
  37.         </ng-template>  
  38.         </kendo-combobox>  
  39.         </div>  
  40.      `  
  41. })  
  42.  export class AppComponent {  
  43.        @ViewChild('combo') public combo: ComboBoxComponent;  
  44.      title = 'Kendo Combo Box';  
  45.   
  46.      public listItems: Array<Technolgy> = [];  
  47.      constructor(private dataService: DataService) {  
  48.       }  
  49.   
  50.      ngOnInit() {  
  51.          this.dataService.getList().subscribe(  
  52.              (data) => this.listItems = data            
  53.          )  
  54.   
  55.      }  
  56.      public selectedItem: number=1;  
  57.   
  58.      handleFilter(value) {  
  59.          alert("Filter Event")  
  60.      }  
  61.  }  
Result
 
 
Figure 2 
 
Footer Template  
 
Use this template if you need to add the footer for the Kendo Combo box list items. To define a footer template, nest an <ng-template> tag with a kendoComboBoxFooterTemplate directive inside a <kendo-combobox> tag.
  1. import { Component, OnInit, Inject, ViewChild } from '@angular/core';  
  2. import { Jsonp, JsonpModule } from '@angular/http';  
  3. import { Observable } from 'rxjs/Rx';  
  4. import { Technolgy } from './technologies.model';  
  5. import { DataService  } from './data.service';  
  6. import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';  
  7.   
  8. interface Item {  
  9.   text?: string,  
  10.   value?: number  
  11. }  
  12.   
  13. @Component({  
  14.   selector: 'app-combobox',  
  15.   styleUrls: ['./app.component.scss'],  
  16.   providers: [DataService],  
  17.     template: `  
  18.   
  19.     <h1>{{title}}</h1>  
  20.     <div class="example-config">  
  21.         Selected Item: {{selectedItem}}  
  22.     </div>  
  23.     <div class="example-wrapper">  
  24.   <p>Favorite Technolgy:</p>  
  25.          <kendo-combobox  
  26.           #combo  
  27.              [data]="listItems"  
  28.              [textField]="'text'"  
  29.              [valueField]="'value'"  
  30.               [valuePrimitive]="true"            
  31.              [(ngModel)]="selectedItem"  
  32.               [filterable]="true"  
  33.              (filterChange)="handleFilter($event)"  
  34.            >  
  35.           <ng-template kendoComboBoxHeaderTemplate>  
  36.             <h4>Technolgy</h4>  
  37.         </ng-template>  
  38.          <ng-template kendoComboBoxFooterTemplate>  
  39.             <h4>Total: {{listItems.length}}</h4>  
  40.         </ng-template>  
  41.         </kendo-combobox>  
  42.         </div>  
  43.      `  
  44. })  
  45.  export class AppComponent {  
  46.        @ViewChild('combo') public combo: ComboBoxComponent;  
  47.      title = 'Kendo Combo Box';  
  48.   
  49.      public listItems: Array<Technolgy> = [];  
  50.      constructor(private dataService: DataService) {  
  51.       }  
  52.   
  53.      ngOnInit() {  
  54.          this.dataService.getList().subscribe(  
  55.              (data) => this.listItems = data            
  56.          )  
  57.   
  58.      }  
  59.      public selectedItem: number=1;  
  60.   
  61.      handleFilter(value) {  
  62.          alert("Filter Event")  
  63.      }  
  64.  }  
Result

 
Figure 3 
 
Item Template
 
Use this template if you need to customize the list which is populated in Kendo Combo box. To define an item template, nest an <ng-template> tag with a kendoComboBoxItemTemplate directive inside a <kendo-combobox> tag.  
  1. import { Component, OnInit, Inject, ViewChild } from '@angular/core';  
  2. import { Jsonp, JsonpModule } from '@angular/http';  
  3. import { Observable } from 'rxjs/Rx';  
  4. import { Technolgy } from './technologies.model';  
  5. import { DataService  } from './data.service';  
  6. import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';  
  7.   
  8. interface Item {  
  9.   text?: string,  
  10.   value?: number  
  11. }  
  12.   
  13. @Component({  
  14.   selector: 'app-combobox',  
  15.   styleUrls: ['./app.component.scss'],  
  16.   styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],  
  17.   providers: [DataService],  
  18.     template: `  
  19.   
  20.     <h1>{{title}}</h1>  
  21.     <div class="example-config">  
  22.         Selected Item: {{selectedItem}}  
  23.     </div>  
  24.     <div class="example-wrapper">  
  25.   <p>Favorite Technolgy:</p>  
  26.          <kendo-combobox  
  27.           #combo  
  28.              [data]="listItems"  
  29.              [textField]="'text'"  
  30.              [valueField]="'value'"  
  31.               [valuePrimitive]="true"            
  32.              [(ngModel)]="selectedItem"  
  33.               [filterable]="true"  
  34.              (filterChange)="handleFilter($event)"  
  35.            >  
  36.  <ng-template kendoComboBoxItemTemplate let-dataItem>  
  37.                 <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}  
  38.             </ng-template>         
  39.         </kendo-combobox>  
  40.         </div>  
  41.      `  
  42. })  
  43.  export class AppComponent {  
  44.        @ViewChild('combo') public combo: ComboBoxComponent;  
  45.      title = 'Kendo Combo Box';  
  46.   
  47.      public listItems: Array<Technolgy> = [];  
  48.      constructor(private dataService: DataService) {  
  49.       }  
  50.   
  51.      ngOnInit() {  
  52.          this.dataService.getList().subscribe(  
  53.              (data) => this.listItems = data            
  54.          )  
  55.   
  56.      }  
  57.      public selectedItem: number=1;  
  58.   
  59.      handleFilter(value) {  
  60.          alert("Filter Event")  
  61.      }  
  62.  }  
Result
 

Figure 4
 
No Data Template
 
Use this template if you need to display a customized message and there is no list in Kendo Combo box. To define a no data template, nest an <ng-template> tag with a kendoDropDownListNoDataTemplate directive inside a <kendo-combobox> tag.  
  1. import { Component, OnInit, Inject, ViewChild } from '@angular/core';  
  2. import { Jsonp, JsonpModule } from '@angular/http';  
  3. import { Observable } from 'rxjs/Rx';  
  4. import { Technolgy } from './technologies.model';  
  5. import { DataService  } from './data.service';  
  6. import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';  
  7.   
  8. interface Item {  
  9.   text?: string,  
  10.   value?: number  
  11. }  
  12.   
  13. @Component({  
  14.   selector: 'app-combobox',  
  15.   styleUrls: ['./app.component.scss'],  
  16.   providers: [DataService],  
  17.     template: `  
  18.   
  19.     <h1>{{title}}</h1>  
  20.     <div class="example-config">  
  21.         Selected Item: {{selectedItem}}  
  22.     </div>  
  23.     <div class="example-wrapper">  
  24.   <p>Favorite Technolgy:</p>  
  25.          <kendo-combobox  
  26.           #combo  
  27.              [data]="listItem"  
  28.              [textField]="'text'"  
  29.              [valueField]="'value'"  
  30.               [valuePrimitive]="true"            
  31.              [(ngModel)]="selectedItem"  
  32.               [filterable]="true"  
  33.              (filterChange)="handleFilter($event)"  
  34.            >  
  35. <ng-template kendoDropDownListNoDataTemplate>  
  36.             <h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>  
  37.         </ng-template>          
  38.         </kendo-combobox>  
  39.         </div>  
  40.      `  
  41. })  
  42.  export class AppComponent {  
  43.        @ViewChild('combo') public combo: ComboBoxComponent;  
  44.      title = 'Kendo Combo Box';  
  45.   
  46.      public listItems: Array<Technolgy> = [];  
  47.      constructor(private dataService: DataService) {  
  48.       }  
  49.   
  50.      ngOnInit() {  
  51.          this.dataService.getList().subscribe(  
  52.              (data) => this.listItems = data            
  53.          )  
  54.   
  55.      }  
  56.      public selectedItem: number=1;  
  57.   
  58.      handleFilter(value) {  
  59.          alert("Filter Event")  
  60.      }  
  61.  }  
Result


Figure 5 
 
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 learned from this article. Your valuable feedback, questions, or comments about this article are always welcome. Download the source code here.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs