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.

Examples –

Components Class -

//app/app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  template: `

    <div class="wrapper">

      <p>User List - </p>

      <kendo-multiselect [data]="users" [(ngModel)]="value"></kendo-multiselect>

    </div>

    <div class="config">

         Selected Users - {{value | json}}

    </div>

  `

})

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 -

//app/app.module.ts

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

@NgModule({

  imports:      [ FormsModule, BrowserModule, BrowserAnimationsModule, DropDownsModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Result looks like-   http://embed.plnkr.co/FkWXatN5luZBXdAGXzJk/

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

Example –

//The MultiSelect Events.

 import { Component } from '@angular/core';

 @Component({

     selector: 'my-app',

     template: `

     <kendo-multiselect [data]="data"

       [filterable]="true"

       (valueChange)="valueChange($event)"

       (filterChange)="filterChange($event)"

       (open)="open()"

       (close)="close()"

       (focus)="focus()"

       (blur)="blur()"

     >

     </kendo-multiselect>

     <event-log title="Event log" [events]="events">

     </event-log>

   `

 })

 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.data = this.source.slice();

     }

     public valueChange(value: any): void {

         this.log("valueChange", value);

     }

     public filterChange(filter: any): void {

         this.log("filterChange", filter);

         this.data = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);

     }

     public open(): void {

         this.log("open");

     }

     public close(): void {

         this.log("close");

     }

     public focus(): void {

         this.log("focus");

     }

     public blur(): void {

         this.log("blur");

     }

     private log(event: string, arg: any): void {

         this.events.push(`${event} ${arg || ""}`);

     }

 }

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