bind new datasource on dropdown change event - ejs schedule event component

Question

I am trying to implement a dropdown on the change method inside the event modal of the ejs-schedule. I have added the change event into the first dropdown and the method is also called but the data source of the second dropdown is not updating.

Can anyone faced this issue or implement it like this then please suggest the solution?

TIA

Hareesh Balasubramanian · Accepted Answer

Hi Avadh, 

Greetings from Syncfusion Support..! 

We have validated your shared query at our end and suspect that your requirement is to perform cascading DropDownList is a series of DropDownList, where the datasource of one DropDownList depends upon another’s value. And for the same, we have prepared a sample using the poupOpen event of our Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-cascading-dropdowns-sample?file=app.component.ts 

var drowDownList = new DropDownList({ 
          dataSource: [ 
            { StateName: 'New York', CountryId: '1', StateId: '101' }, 
            { StateName: 'Queensland', CountryId: '2', StateId: '104' }, 
            { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }, 
            { StateName: 'Victoria', CountryId: '2', StateId: '106' }, 
            { StateName: 'Virginia ', CountryId: '1', StateId: '102' }, 
            { StateName: 'Washington', CountryId: '1', StateId: '103' } 
          ], 
          change: function() { 
            var cityObj = (args.element.querySelector('#city') as any) 
              .ej2_instances[0]; 
            var stateObj = (args.element.querySelector('#state') as any) 
              .ej2_instances[0]; 
            cityObj.enabled = true; 
            var tempQuery1 = new Query().where( 
              'StateId', 
              'equal', 
              stateObj.value 
            ); 
            cityObj.query = tempQuery1; 
            cityObj.text = null; 
            cityObj.dataBind(); 
          }, 
          fields: { value: 'StateId', text: 'StateName' }, 
          value: args.State, 
          floatLabelType: 'Always', 
          placeholder: 'Select a State' 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute('name', 'State'); 
      } 

UG link: https://ej2.syncfusion.com/documentation/drop-down-list/how-to/cascading/ 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 
Hareesh