How do I get the selected value of dropdownlist in the Event Editor?

Question

I have added custom fields to my Event Editor, among which a Numeric Textbox ('Distance') and a Dropdownlist ('Client'). I want to get the name of the client the user selects from the dropdown list, for further processing.

This is code is in my onPopupOpen() function:

onPopupOpen(args: PopupOpenEventArgs): void {
  let clientsMapped = this.clients.map(client=> {  return {text:client.company, value:client.company};  })


  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: 'Client'}
      }) as HTMLInputElement;
      container.appendChild(inputEle);

      let row2: HTMLElement = createElement('div', {className: 'custom-field-row'});
      let formElement2: HTMLElement = args.element.querySelector('.e-schedule-form');
      formElement2.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
      let container2: HTMLElement = createElement('div', {className: 'custom-field-container'});
      let inputEle2: HTMLInputElement = createElement('input', {
        className: 'e-field', attrs: {name: 'distance'}
      }) as HTMLInputElement;

      container.appendChild(inputEle2);
    
      row.appendChild(container);
      row2.appendChild(container2);


      let dropDownList: DropDownList = new DropDownList({

        dataSource: clientsMapped,
        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');


      let distanceTextBox:  NumericTextBox = new  NumericTextBox({   
        value: 88,
        floatLabelType: 'Auto', placeholder: 'Distance in KM'
        //enableRtl: true
      });

      distanceTextBox.appendTo(inputEle2);
      inputEle2.setAttribute('name', 'km');

     }
   }
  }

I want, by making use of the ActionComplete method, use the selected client to pass an object to the back end like this:

const object= {
  createdBy: this.userName.username,
  client: *here I want the selected user from the Dropdown list*
  distance: *here i want the value of distance*,
  
};

If you need some more information please let me know. Thanks in advance

Balasubramanian Sattanathan · Answer

Hi Youssef Lakdime, 
 
Greetings from Syncfusion Support. 
 
We have validated your reported scenario at our end. We suspect that, your requirement is needed to persist the additional fields values(DropDownList and NumericTextBox) in the DB. We can persist the additional fields values in the DB using below highlighted code in the screenshots. And we let you know that, we don’t need to actionComplete event for passing the data to the back end. 
 
Screenshot 1: Table data 
  
 
Screenshot 2: Table Definition 
  
 
Screenshot 3: HomeController.cs 
 
  
 
app.component.cs : 




private dataManger: DataManager = new DataManager({ 
  url: 'http://localhost:54738/Home/LoadData', 
  crudUrl: 'http://localhost:54738/Home/UpdateData', 
  crossDomain: true, 
  adaptor: new UrlAdaptor 
}); 
public eventSettings: EventSettingsModel = { dataSource: this.dataManger }; 
 
Service: https://www.syncfusion.com/downloads/support/forum/152575/ze/Service_additional_fields-928901658.zip 
Sample: https://stackblitz.com/edit/angular-mjirmr-u8cwvr?file=app.component.ts 
 
Kindly try the above sample and let us know if you have any concerns 
 
Regards, 
Balasubramanian S

Youssef Lakdime · Answer

Thank you for your reply. However, the solution you provided is A C# / Visual Studio environment, And I am using Angular 8 with MongoDB as a Database.

To clarify my needs a bit more:

I have this method which adds two custom fields to the event editor, a Dropdown List 'client' and a Numeric Textbox 'distance':

onPopupOpen(args: PopupOpenEventArgs): void {


  let clientsMapped = this.clients.map(client=> {  return {text:client.company, value:client.company};  })


  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: 'Client'}
      }) as HTMLInputElement;
      container.appendChild(inputEle);

      let row2: HTMLElement = createElement('div', {className: 'custom-field-row'});
      let formElement2: HTMLElement = args.element.querySelector('.e-schedule-form');
      formElement2.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
      let container2: HTMLElement = createElement('div', {className: 'custom-field-container'});
      let inputEle2: HTMLInputElement = createElement('input', {
        className: 'e-field', attrs: {name: 'distance'}
      }) as HTMLInputElement;

      container.appendChild(inputEle2);
    
      row.appendChild(container);
      row2.appendChild(container2);


      let dropDownList: DropDownList = new DropDownList({

        dataSource: clientsMapped,
        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');


      let distanceTextBox:  NumericTextBox = new  NumericTextBox({   
        value: 88,
        floatLabelType: 'Auto', placeholder: 'Distance in KM'
        //enableRtl: true
      });

      distanceTextBox.appendTo(inputEle2);
      inputEle2.setAttribute('name', 'km');

     }
   }
  }

The clients are retrieved from my ClientService:

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

My wish is that the value of distanceTextBox gets populated dynamically depending on which Client the user chooses from the Dropdown List. So for example, 'Bob' is a client in the MongoDB:

const relatieSchema = new Schema({
    company:  {type: String, required: true, unique: false},
    distance: {type: Number, required: true},
});

If the users clicks on Bob in the Dropdown, the Distance field gets the distance value from this client instantly, instead of the hard-coded 88.

Thank you

Balasubramanian Sattanathan · Answer

Hi Youssef Lakdime,

Thanks for your update.

We have validated your reported scenario at our end and prepared a sample in Angular 8 with MongoDB as a Database.

Sample: https://www.syncfusion.com/downloads/support/forum/152575/ze/ScheduleSample-951227284.zip

private dataManager: DataManager = new DataManager({

url: 'http://localhost:5000/GetData',

crudUrl: 'http://localhost:5000/BatchData',

adaptor: new UrlAdaptor,

crossDomain: true

});

server.js.

MongoClient.connect(url, function (err, db) {

if (err) throw err;

var dbo = db.db("mydb");

app.use(function (req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

next();

});

app.post("/GetData", (req, res) => {

dbo.collection('ScheduleData').find({}).toArray((err, cus) => {

res.send(cus);

});

app.post("/BatchData", (req, res) => {

console.log(req.body);

var eventData = [];

if (req.body.action == "insert" || (req.body.action == "batch" && req.body.added.length > 0)) {

(req.body.action == "insert") ? eventData.push(req.body.value) : eventData = req.body.added;

for (var i = 0; i < eventData.length; i++) {

var sdate = new Date(eventData[i].StartTime);

var edate = new Date(eventData[i].EndTime);

eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));

eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));

dbo.collection('ScheduleData').insertOne(eventData[i]);

}

if (req.body.action == "update" || (req.body.action == "batch" && req.body.changed.length > 0)) {

(req.body.action == "update") ? eventData.push(req.body.value) : eventData = req.body.changed;

for (var i = 0; i < eventData.length; i++) {

delete eventData[i]._id;

var sdate = new Date(eventData[i].StartTime);

var edate = new Date(eventData[i].EndTime);

eventData[i].StartTime = (new Date(+sdate - (sdate.getTimezoneOffset() * 60000)));

eventData[i].EndTime = (new Date(+edate - (edate.getTimezoneOffset() * 60000)));

dbo.collection('ScheduleData').updateOne({ "Id": eventData[i].Id }, { $set: eventData[i] });

}

if (req.body.action == "remove" || (req.body.action == "batch" && req.body.deleted.length > 0)) {

(req.body.action == "remove") ? eventData.push({ Id: req.body.key }) : eventData = req.body.deleted;

for (var i = 0; i < eventData.length; i++) {

dbo.collection('ScheduleData').deleteOne({ "Id": eventData[i].Id });

}

res.send(req.body);

});

Note: We have removed the local offset time before inserting and updating the events in the database collection to render the appointments without considering system UTC in the scheduler.

Steps to run the sample:

1. Run MongoDB and create the collection named ‘ScheduleData’ in ‘mydb’ database.

2. Run the below commands.

npm install

npm run server

npm start

Please try the above sample and let us know if you need further assistance.

Regards,

Balasubramanian S