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';
  8. interface Item {
  9. text?: string,
  10. value?: number
  11. }
  13. @Component({
  14. selector: 'app-combobox',
  15. styleUrls: ['./app.component.scss'],
  16. providers: [DataService],
  17. template: `
  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. >
  36. </kendo-combobox>
  37. </div>
  38. `
  39. })
  40. export class AppComponent {
  41. @ViewChild('combo') public combo: ComboBoxComponent;
  42. title = 'Kendo Combo Box';
  44. public listItems: Array<Technolgy> = [];
  45. constructor(private dataService: DataService) {
  46. }
  48. ngOnInit() {
  49. this.dataService.getList().subscribe(
  50. (data) => this.listItems = data
  51. )
  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';
  8. interface Item {
  9. text?: string,
  10. value?: number
  11. }
  13. @Component({
  14. selector: 'app-combobox',
  15. styleUrls: ['./app.component.scss'],
  16. providers: [DataService],
  17. template: `
  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';
  46. public listItems: Array<Technolgy> = [];
  47. constructor(private dataService: DataService) {
  48. }
  50. ngOnInit() {
  51. this.dataService.getList().subscribe(
  52. (data) => this.listItems = data
  53. )
  55. }
  56. public selectedItem: number=1;
  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';
  8. interface Item {
  9. text?: string,
  10. value?: number
  11. }
  13. @Component({
  14. selector: 'app-combobox',
  15. styleUrls: ['./app.component.scss'],
  16. providers: [DataService],
  17. template: `
  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';
  49. public listItems: Array<Technolgy> = [];
  50. constructor(private dataService: DataService) {
  51. }
  53. ngOnInit() {
  54. this.dataService.getList().subscribe(
  55. (data) => this.listItems = data
  56. )
  58. }
  59. public selectedItem: number=1;
  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';
  8. interface Item {
  9. text?: string,
  10. value?: number
  11. }
  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: `
  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';
  47. public listItems: Array<Technolgy> = [];
  48. constructor(private dataService: DataService) {
  49. }
  51. ngOnInit() {
  52. this.dataService.getList().subscribe(
  53. (data) => this.listItems = data
  54. )
  56. }
  57. public selectedItem: number=1;
  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';
  8. interface Item {
  9. text?: string,
  10. value?: number
  11. }
  13. @Component({
  14. selector: 'app-combobox',
  15. styleUrls: ['./app.component.scss'],
  16. providers: [DataService],
  17. template: `
  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';
  46. public listItems: Array<Technolgy> = [];
  47. constructor(private dataService: DataService) {
  48. }
  50. ngOnInit() {
  51. this.dataService.getList().subscribe(
  52. (data) => this.listItems = data
  53. )
  55. }
  56. public selectedItem: number=1;
  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.