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