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.


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


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!!!
ANIL SINGH

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 - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions