KendoOptimisedDropDownList
* A simple optimised kendo Drop Down List to be used with big set of data.
* This Dropdown List enhances the funtionality of Kendo Angular DropDownList
kendo-dropdownlist component.It loads the next set of data when users reaches the end of scroll. This feature is also applicable for search.
* It is developed using
Angular >=6.1.0 and its newly introduced
ng g library schematics.
* Library location:
projects/kendo-optimised-search directory of this repository.
Dependencies
"@progress/kendo-angular-dropdowns": "^4.2.3",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-theme-bootstrap": "^4.8.0",
"@progress/kendo-theme-default": "latest"
Installation
npm i kendo-optimised-search
API
import { KendoOptimisedSearchModule } from 'kendo-optimised-search'
selector: kendoOptimisedSearch
$3
| Input | Type | Required | Description |
| ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- |
| apiUrl | string |
YES | the url of a remote server that supports http/jsonp calls. |
| account | number |
YES | account number for which data is to be queried |
| apiMethod | string | Optional, default: 'get' | the http/jsonp method to be used. |
| apiType | string | Optional, default: 'http' | http or jsonp method types. |
| noOfRows | number | Optional, default: 100 | No of records to be fetched after each api call |
$3
| Output | Type | Required | Description |
| ---------------- | ---------- | -------- | ------------------------------------------------------ |
| onselectionChange | object
| YES | emits selected element
Usage
1) Register the KendoOptimisedSearchModule in your app module.
> import { KendoOptimisedSearchModule } from 'kendo-optimised-search'
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { KendoOptimisedSearchModule } from 'kendo-optimised-search';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DropDownsModule,
BrowserAnimationsModule,
KendoOptimisedSearchModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }