import { Component, OnInit, Input, ViewEncapsulation, Output, ViewChild } from '@angular/core';
import { Query, DataManager, WebApiAdaptor} from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { EmitType } from '@syncfusion/ej2-base';
import { FilteringEventArgs, highlightSearch} from '@syncfusion/ej2-dropdowns';
import { FormBuilder, FormGroup, FormControl, Validators, FormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'kt-docselect',
templateUrl: './docselect.component.html',
styleUrls: ['./docselect.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class DocselectComponent implements OnInit {
invDetailForm: FormGroup;
fb: FormBuilder;
@ViewChild('element') element;
constructor(private builder: FormBuilder) {
this.fb = builder;
this.createForm();
}
createForm() :void {
this.invDetailForm = this.fb.group({
docName: ['', Validators.required]
});
}
public datatest: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
// bind the Query instance to query property
public query: Query = new Query().select(['ShipName', 'EmployeeID']).take(10).requiresCount();
// maps the remote data column to fields property
public remoteFields: Object = {
text: 'ShipName', value: 'EmployeeID', itemCreated: (e: any) => {
highlightSearch(e.item, this.queryString, true, 'StartsWith');
}
};
//sort the result items
public sorting: string = 'Ascending';
public queryString: string;
// set the height of the popup element
public height: string = '200px';
// set the placeholder to DropDownList input element
public remoteWaterMark: string = 'Select a name';
public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
// load overall data when search key empty.
if (e.text === '') {
e.updateData(this.datatest);
} else {
// restrict the remote request until search key contains 3 characters.
if (e.text.length < 3) { return; }
let query: Query = new Query().select(['ShipName', 'EmployeeID']);
query = (e.text !== '') ? query.where('ShipName', 'startswith', e.text, true) : query;
e.updateData(this.datatest, query);
}
};
ngOnInit() {
}
}
<div class="box-form">
<form [formGroup]="invDetailForm" novalidate id="formId">
<ejs-dropdownlist formControlName="docName" id='dropdownlist-template' [dataSource]='datatest' [fields]='remoteFields' [query]='query' [popupHeight]='height' [placeholder]='remoteWaterMark' [allowFiltering]='true' [sortOrder]='sorting' (filtering)='onFiltering($event)' [itemTemplate]='itemTemplate' floatLabelType='Auto'>
<!-- <ng-template #headerTemplate>
<div class="head"> <span class="photo">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>
</ng-template> -->
<ng-template #itemTemplate="" let-datatest>
<!-- <img class="empImage" src="./assets/auto-complete/Employees/{{data.Eimg}}.png" alt="employee" /> -->
<h5>{{datatest.ShipName}}</h5>
<p><span>{{datatest.ShipAddress}}</span> -- <span>{{datatest.ShipCity}}</span> -- <span>{{data.OrderDate}}</span></p>
<p><span>{{datatest.ShipCity}}</span> -- <span>{{datatest.OrderDate}}</span></p>
</ng-template>
<!-- <ng-template #valueTemplate let-data>
<div><img class="valueTemp" src="./assets/auto-complete/Employees/{{data.Eimg}}.png" height="26px" width="26px" alt="employee" />
<div class="name"> {{data.Name}} </div>
</div>
</ng-template> -->
</ejs-dropdownlist>
</form>
</div>
