Working With Templates And Events In Kendo Combo Box For Angular

Gowtham K
7y
3.7k
0
1

Article

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.

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Technolgy } from './technologies.model';
import { DataService } from './data.service';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
interface Item {
text?: string,
value?: number
}
@Component({
selector: 'app-combobox',
styleUrls: ['./app.component.scss'],
providers: [DataService],
template: `
<h1>{{title}}</h1>
<div class="example-config">
Selected Item: {{selectedItem}}
</div>
<div class="example-wrapper">
<p>Favorite Technolgy:</p>
<kendo-combobox
#combo
[data]="listItems"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
[(ngModel)]="selectedItem"
[filterable]="true"
(filterChange)="handleFilter($event)"
>
</kendo-combobox>
</div>
`
})
export class AppComponent {
@ViewChild('combo') public combo: ComboBoxComponent;
title = 'Kendo Combo Box';
public listItems: Array<Technolgy> = [];
constructor(private dataService: DataService) {
}
ngOnInit() {
this.dataService.getList().subscribe(
(data) => this.listItems = data
)
}
public selectedItem: number=1;
handleFilter(value) {
alert("Filter Event")
}
}

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

We have set the filter property as true.
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,

Header Template
Footer Template
Item Template
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.

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Technolgy } from './technologies.model';
import { DataService } from './data.service';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
interface Item {
text?: string,
value?: number
}
@Component({
selector: 'app-combobox',
styleUrls: ['./app.component.scss'],
providers: [DataService],
template: `
<h1>{{title}}</h1>
<div class="example-config">
Selected Item: {{selectedItem}}
</div>
<div class="example-wrapper">
<p>Favorite Technolgy:</p>
<kendo-combobox
#combo
[data]="listItems"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
[(ngModel)]="selectedItem"
[filterable]="true"
(filterChange)="handleFilter($event)"
>
<ng-template kendoComboBoxHeaderTemplate>
<h4>Technolgy</h4>
</ng-template>
</kendo-combobox>
</div>
`
})
export class AppComponent {
@ViewChild('combo') public combo: ComboBoxComponent;
title = 'Kendo Combo Box';
public listItems: Array<Technolgy> = [];
constructor(private dataService: DataService) {
}
ngOnInit() {
this.dataService.getList().subscribe(
(data) => this.listItems = data
)
}
public selectedItem: number=1;
handleFilter(value) {
alert("Filter Event")
}
}

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.

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Technolgy } from './technologies.model';
import { DataService } from './data.service';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
interface Item {
text?: string,
value?: number
}
@Component({
selector: 'app-combobox',
styleUrls: ['./app.component.scss'],
providers: [DataService],
template: `
<h1>{{title}}</h1>
<div class="example-config">
Selected Item: {{selectedItem}}
</div>
<div class="example-wrapper">
<p>Favorite Technolgy:</p>
<kendo-combobox
#combo
[data]="listItems"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
[(ngModel)]="selectedItem"
[filterable]="true"
(filterChange)="handleFilter($event)"
>
<ng-template kendoComboBoxHeaderTemplate>
<h4>Technolgy</h4>
</ng-template>
<ng-template kendoComboBoxFooterTemplate>
<h4>Total: {{listItems.length}}</h4>
</ng-template>
</kendo-combobox>
</div>
`
})
export class AppComponent {
@ViewChild('combo') public combo: ComboBoxComponent;
title = 'Kendo Combo Box';
public listItems: Array<Technolgy> = [];
constructor(private dataService: DataService) {
}
ngOnInit() {
this.dataService.getList().subscribe(
(data) => this.listItems = data
)
}
public selectedItem: number=1;
handleFilter(value) {
alert("Filter Event")
}
}

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.

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Technolgy } from './technologies.model';
import { DataService } from './data.service';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
interface Item {
text?: string,
value?: number
}
@Component({
selector: 'app-combobox',
styleUrls: ['./app.component.scss'],
styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
providers: [DataService],
template: `
<h1>{{title}}</h1>
<div class="example-config">
Selected Item: {{selectedItem}}
</div>
<div class="example-wrapper">
<p>Favorite Technolgy:</p>
<kendo-combobox
#combo
[data]="listItems"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
[(ngModel)]="selectedItem"
[filterable]="true"
(filterChange)="handleFilter($event)"
>
<ng-template kendoComboBoxItemTemplate let-dataItem>
<span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
</ng-template>
</kendo-combobox>
</div>
`
})
export class AppComponent {
@ViewChild('combo') public combo: ComboBoxComponent;
title = 'Kendo Combo Box';
public listItems: Array<Technolgy> = [];
constructor(private dataService: DataService) {
}
ngOnInit() {
this.dataService.getList().subscribe(
(data) => this.listItems = data
)
}
public selectedItem: number=1;
handleFilter(value) {
alert("Filter Event")
}
}

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.

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Technolgy } from './technologies.model';
import { DataService } from './data.service';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
interface Item {
text?: string,
value?: number
}
@Component({
selector: 'app-combobox',
styleUrls: ['./app.component.scss'],
providers: [DataService],
template: `
<h1>{{title}}</h1>
<div class="example-config">
Selected Item: {{selectedItem}}
</div>
<div class="example-wrapper">
<p>Favorite Technolgy:</p>
<kendo-combobox
#combo
[data]="listItem"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
[(ngModel)]="selectedItem"
[filterable]="true"
(filterChange)="handleFilter($event)"
>
<ng-template kendoDropDownListNoDataTemplate>
<h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>
</ng-template>
</kendo-combobox>
</div>
`
})
export class AppComponent {
@ViewChild('combo') public combo: ComboBoxComponent;
title = 'Kendo Combo Box';
public listItems: Array<Technolgy> = [];
constructor(private dataService: DataService) {
}
ngOnInit() {
this.dataService.getList().subscribe(
(data) => this.listItems = data
)
}
public selectedItem: number=1;
handleFilter(value) {
alert("Filter Event")
}
}

Result

Figure 5

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 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

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all