I am using Syncfusion Angular Scheduler and I added a custom field, a dropdown list, and I want to populate that with dynamic data from my MongoDB. This is my code:
onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'Editor') {
if (!args.element.querySelector('.custom-field-row')) {
....
let dropDownList: DropDownList = new DropDownList({
dataSource: [
{text: this.clients[0].company, value: this.clients[0].company},
{text: this.clients[1].company, value: this.clients[1].company},
],
fields: {text: 'text', value: 'value'},
value: (<{ [key: string]: Object }>(args.data)).Client as string,
floatLabelType: 'Always', placeholder: 'Client'
});
}
}
However, I want to add them dynamically without specifying the 0th index or 1 because i dont know how many clients the user will have. So I want to display the company
property of every client (Object). when I add a for loop or ForEach in dataSource
, it gives errors all over the place. Also, this.clients.map(client => ({text: client.company, value: client.company})),
gives me an empty Dropdown list. If you need more info, please let me know.
ngOnInit() {
this.clientService.getClients().subscribe((data : any) => {
this.clients= data.client;
});
}
We have validated your reported problem at our side by preparing the CRUD sample with MongoDB as a service. In that, we have using Dropdown Component as an additional (custom) field and the data source for the custom field is assigned from the Observable Data Services and it can be downloaded from the following link.
Code snippet:
Sample: https://www.syncfusion.com/downloads/support/directtrac/269086/ze/sample-525591979
Kindly try the above sample and if you have any other concerns please revert for further assistance.