python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 and 5 MultiSelect Kendo UI

Angular 4 and 5 MultiSelect Kendo UI

The Kendo MultiSelect is a form component and used to displays a collection/list of options which allows selecting the multiple options from the collection or list. For the detail, you can see the below examples with events and so on.

Components Class -
import { Component } from '@angular/core';

  selector: 'my-app',
  template: `
    <div class="wrapper">
      <p>User List - </p>
      <kendo-multiselect [data]="users" [(ngModel)]="value"></kendo-multiselect>
    <div class="config">
         Selected Users - {{value | json}}
export class AppComponent {
    public users: Array<string> = ['Anil Singh', 'Sunil Singh', 'Sushil SIngh', 'Aradhya', 'Reena Singh', 'Temp 1', 'Temp 2', 'Temp 3'];
    public value: any = ['Anil Singh']

App Module -
import { NgModule }      from '@angular/core';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import 'hammerjs';

import { AppComponent }   from './app.component';

  imports:      [ FormsModule, BrowserModule, BrowserAnimationsModule, DropDownsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]

export class AppModule { }

MultiSelect Features – The features looks like.
ü  Data binding
ü  Value binding
ü  Templates
ü  Filtering
ü  Accessibility
ü  Forms support
ü  Keyboard navigation
ü  Controlling the state of the options list

MultiSelect Events - The features looks like.
ü  valueChange
ü  filterChange
ü  open
ü  close
ü  focus
ü  blur

//The MultiSelect Events.
 import { Component } from '@angular/core';

     selector: 'my-app',
     template: `
     <kendo-multiselect [data]="data"
     <event-log title="Event log" [events]="events">

 export class AppComponent {
     public events: string[] = [];
     public source: Array<string> = ["Anil", "Sunil", "Sushil", "Sushil", "Aradhya","Reena", "Temp 1","Temp 2"];
     public data: Array<string>;

     constructor() { = this.source.slice();

     public valueChange(value: any): void {
         this.log("valueChange", value);

     public filterChange(filter: any): void {
         this.log("filterChange", filter); = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);

     public open(): void {

     public close(): void {

     public focus(): void {

     public blur(): void {

     private log(event: string, arg: any): void {`${event} ${arg || ""}`);

I hope you are enjoying with this post! Please share with you friends!! Thank you!!!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions