Wanted to merge two module of the syncfusion
Respected Person,
I am using Syncfusion modules in my Angular 8 Application. I am using DocumentEditor from syncfusion. Now as Per requirement, I wanted to use your dropdown module inside DocumentEditor. Reason behind it is to provide user suggestion while working with document. So I would like to know if it could be possible.
Here from attached image you can understand my requirement clearly.
Also in the same application I am using ejs-autocomplete. Where I have followed one of your forum solution . Link is http://https://www.syncfusion.com/forums/148115/auto-complete-remote-data . Now I tried to implement auto fill functionality. but some how it's not working. Also I want to localization of de. That's also not working.
Here is the some code.
<ejs-autocomplete id='atcelement' name="name_stage" #remote [dataSource]='data | async' [(ngModel)]="testStage.spielbezeichnung" inputFieldWhiteSpaceValidator
[(value)]="testStage.spielbezeichnung" (select)="selectedSpiel($event)" required [locale]="locale" [autofill]='autofill' [placeholder]="spielInputPlaceholder"
[fields]='fields' (filtering)="onFiltering($event, remote)" (keydown.Tab)="validationTest();" [highlight]='highlight'>
<ng-template #itemTemplate="" let-data="">
<!--set the value to itemTemplate property-->
<span><span class='name'> {{data.spielbezeichnung}}</span><span class ='city'> von {{data.betriebsname}}</span></span>
</ng-template>
</ejs-autocomplete>
public fields: Object = { value: 'spielbezeichnung' };
public data: Observable<any>;
public autofill: Boolean = true;
public highlight: Boolean = true;
public locale: string = 'de';located in different folder:
loadCldr(
require('./../calendar/de/numbers.json'),
require('./../calendar/de/ca-gregorian.json'),
require('./../calendar/de/numberingSystems.json'),
require('./../calendar/de/timeZoneNames.json'),
require('./../calendar/de/weekData.json')
);calling this function on ngoninit:syncfusionLocalization() {
L10n.load({
de: {
dropdowns: {
noRecordsTemplate: 'Keine Einträge gefunden',
actionFailureTemplate: 'actionFailureTemplate',
},
},
});
}public getData(remote: AutoCompleteComponent, text: string): Observable<any> {
let params = new HttpParams().set('spielbezeichnung.contains', text);
return this.http.get('services/bettab/api/V1/betriebe/Spielstaetten/all', { params: params }).pipe(
map(data => {
remote.hidePopup();
setTimeout(() => remote.showPopup(), 500);
// return ((<any>data).value);
return data;
})
);
}
public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs, remote: AutoCompleteComponent) => {
if (e.text.length >= 2) {
this.data = this.getData(remote, e.text);
e.preventDefaultAction = true;
} else {
e.cancel = true;
}
this.validationTest();
};
I wanted to change "No records found"
I hope you could provide me guidance on my problem.
Thanks a lot.
Regards,
Parth
SIGN IN To post a reply.
6 Replies
Hi Parthkumar,
Please find the response from dropdownlist team.
Query 1: Here from attached image you can understand my requirement clearly.
We suggest that you to try out the inline dropdownlist which is similar to the reported requirement. Please check the below demo sample and confirm if this meets your requirement.
Query 2: Also in the same application I am using ejs-autocomplete. Where I have followed one of your forum solution . Link is http://https://www.syncfusion.com/forums/148115/auto-complete-remote-data . Now I tried to implement auto fill functionality. but some how it's not working. Also I want to localization of de. That's also not working.
In the below sample, we used the localization for autocomplete and loaded the “de” culture. The localized text is applied to the component. Please check the below screenshot.
Also, we checked your query of “autofill not working”. In the code, we could see that the data for the autocomplete component is loaded dynamically in the filtering event. For this case, we suggest that you use the updateData method for custom filtering. Pass the resultant array to the updateData method along with the query to resolve the auto fill issue. Also, you have restricted the filtering in the event component. For the autocomplete we already provided a minLength property for restricting the filtering and filtering action will be performed after typed the minimum characters. So kindly use this for property for restricting filtering. Refer to the below code.
[HTML]
|
<ejs-autocomplete id='games' #sample [dataSource]='data | async' [fields]='fields' [locale]='locale'
autofill ="true" minLength="2" (filtering)="onFiltering($event)" ></ejs-autocomplete |
[TS]
|
ngOnInit(): void {
this.syncfusionLocalization();
}
syncfusionLocalization() {
L10n.load({
de: {
dropdowns: {
noRecordsTemplate: 'Keine Einträge gefunden',
actionFailureTemplate: 'actionFailureTemplate',
},
},
});
}
public onFiltering(args: any): void {
args.preventDefaultAction = true;
let query: Query = new Query();
query = (args.text !== '') ? query.where('Game', 'startswith', args.text, true) : query;
let data = this.dataService.fetch(args.text).subscribe(result => {
args.updateData(result,query);
});
} |
Please find the sample below.
Regards,
Suriya M.
SIGN IN To post a reply.
