How do I dynamically populate the Dropdown List in my event editor?

Question

Hi, I hope you can assist me with this : I added a custom field, a dropdown list called 'Client', and I want to populate that with dynamic data (clients) from my MongoDB. This is my code:

onPopupOpen(args: PopupOpenEventArgs): void {

  if (args.type === 'Editor') {
    // Create required custom elements in initial time
    if (!args.element.querySelector('.custom-field-row')) {
let row: HTMLElement = createElement('div', {className: 'custom-field-row'});
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
let container: HTMLElement = createElement('div', {className: 'custom-field-container'});
let inputEle: HTMLInputElement = createElement('input', {
  className: 'e-field', attrs: {name: 'Klant'}
}) as HTMLInputElement;

container.appendChild(inputEle);
row.appendChild(container);
let dropDownList: DropDownList = new DropDownList({

    dataSource: [

      this.Client.map(client => ({text: client.company, value: client.company})),

  ],
  fields: {text: 'text', value: 'value'},
  value: (<{ [key: string]: Object }>(args.data)).Client as string,
  floatLabelType: 'Always', placeholder: 'Client'
});
     }
    }
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'Client');

This is giving me an empty dropdown list. Why isnt it showing all the clients of the logged in user? So I want to display the company property of every client (Object). When I try to statically show the client of the first element, like this, it works. But i want it to be dynamic, because every user has a different amount of clients.
 dataSource: [

     {text: this.clients[0].company, value: this.clients[0].company},

  ],
 If you need more info, please let me know.

This is where I retrieve the response of the clients:
ngOnInit() {

  this.clientService.getClients().subscribe((data : any) => {
    this.clients= data.client;
  });
  console.log(this.clients)
}

Hareesh Balasubramanian · Answer

Hi Youssef, 

Greeting from Syncfusion Support. 

We have validated your reported problem at our side by preparing CURD sample with MongoDB as service. In that we have using Dropdown Component as 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: 




  ngOnInit(): void { 
    this.selectedDate = new Date(2018, 1, 14); 
    this.eventSettings = { dataSource: this.dataManager }; 
    const studentsObservable = this.scheduleService.getSchedule(); 
    studentsObservable.subscribe((dropDowmData: Schedule[]) => { 
      this.dropDownDataSource = dropDowmData; 
    }); 
  } 
  onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type === 'Editor') { 
      // Create required custom elements in initial time 
      if (!args.element.querySelector('.custom-field-row')) { 
        let row: HTMLElement = createElement('div', { className: 'custom-field-row' }); 
        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 
        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 
        let container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 
        let inputEle: HTMLInputElement = createElement('input', { 
          className: 'e-field', attrs: { name: 'EventType' } 
        }) as HTMLInputElement; 
        container.appendChild(inputEle); 
        row.appendChild(container); 
        let drowDownList: DropDownList = new DropDownList({ 
          dataSource: this.dropDownDataSource, 
          fields: { text: 'text', value: 'value' }, 
          value: (args.data as { [key: string]: Object }).EventType as string, 
          floatLabelType: 'Always', placeholder: 'Event Type' 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute('name', 'EventType'); 
      } 
    } 
  } 

Sample: https://www.syncfusion.com/downloads/support/forum/152354/ze/sample1518673018  

Kindly try the above sample and if you have any other concerns please revert for further assistance. 

Regards, 
Hareesh

Youssef Lakdime · Answer

Thank you for your reply. However I dont really understand the solution, can you please explain why for example you named it ScheduleService, and Schedule[].

In my case, from the ClientService I retrieve an array of Objects, containing Clients. And all the clients have the property 'company', which I want to display in the DropdownList. I hope i made it a bit more clear for you.

this.clientService.getClients().subscribe((data : any) => {
  this.clients = data.client;
});

I want the Dropdownlist as follows: (but in this case the DropDownlist is empty.

  dataSource: [
    this.clients.map(client => ({text: client.company, value: client.company})),
],

Thanks in advance.

Youssef Lakdime · Answer

Also I would like to note that the objects 'Clients' does not consist of 'text' and 'value' properties like in your solution. My 'client' objects has other properties among which 'company' ( String ).

Kindly waiting for your reply

Hareesh Balasubramanian · Answer

Hi Youssef, 

Thanks for the update. 

We have validated your reported problem and we suspect that you have little confused with the scheduleService and Schedule[] names and for that we have modified our previously updated sample by converting it into clientService and client[] (class name of the Array of objects). And the sample can be downloaded from the following link. 

Code snippet: 




ngOnInit(): void { 
    this.selectedDate = new Date(2018, 1, 14); 
    this.eventSettings = { dataSource: this.dataManager }; 
    const clientObservable = this.clientService.getClient(); 
    clientObservable.subscribe((client: client[]) => { 
      this.dropDownDataSource = client; 
    }); 
  } 
  onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type === 'Editor') { 
      // Create required custom elements in initial time 
      if (!args.element.querySelector('.custom-field-row')) { 
        let row: HTMLElement = createElement('div', { className: 'custom-field-row' }); 
        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 
        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 
        let container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 
        let inputEle: HTMLInputElement = createElement('input', { 
          className: 'e-field', attrs: { name: 'EventType' } 
        }) as HTMLInputElement; 
        container.appendChild(inputEle); 
        row.appendChild(container); 
        let drowDownList: DropDownList = new DropDownList({ 
          dataSource: this.dropDownDataSource, 
          fields: { text: 'company', value: 'companyValue' }, 
          value: (args.data as { [key: string]: Object }).EventType as string, 
          floatLabelType: 'Always', placeholder: 'Event Type' 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute('name', 'EventType'); 
      } 
    } 
  } 

Sample: https://www.syncfusion.com/downloads/support/forum/152354/ze/sample685327864  

Kindy try the above sample, if the issue still persists at your side kindly try to replicate the same problem in our shared sample else share your Scheduler rendering code snippets/image/video demo/working sample(if possible) for the better serve. 

Regards, 
Hareesh