How to call function on dropdownlist change event in DataGrid in vue.

Question

Hello,There are 3 dropdownlists - country, district, area..first select country, according to that district data comes then select district according to that area data comes.I want to call a function on the country dropdown list change event to get district data and to call a function on the district dropdown list change event to get area data.Please share an example if possible for both ADD and EDIT records. (I m using Vue.js DateGrid).I want to call a function as I want to pass country value to get the district data and the same for the district as well.

Rajapandi Ravi · Accepted Answer

Hi Shivani, 

Thanks for the update 

We have analyzed your query and we could see that you like to pass the “countryObj.value” to the getDistrict() method. Based on your query we have prepared a sample and achieved your requirement by storing the “this” keyword globally in window. Please refer the below code example and sample for more information. 






write: function () { 
          countryObj = new DropDownList({ 
            dataSource: country, 
            fields: { value: "countryId", text: "countryName" }, 
            change: function (args) { 
              window.callfunction.getDistrict(countryObj.value); //pass the value here 
              stateObj.enabled = true; 
              let tempQuery = new Query().where( 
                "countryId", 
                "equal", 
                countryObj.value 
              ); 
              stateObj.query = tempQuery; 
              stateObj.text = null; 
              stateObj.dataBind(); 
            }, 
            placeholder: "Select a country", 
            floatLabelType: "Never", 
          }); 
          countryObj.appendTo(countryElem); 
        } 
        .  .  .  .  .  .  .  .  . 
        .  .  .  .  .  .  .  .  . 
}, 
methods: { 
    dataBound: function (e) { //dataBound event of Grid 
      window.callfunction = this; //store this value in window 
    }, 
    getDistrict: function (args) { 
      console.log(args); //using this argument you can access the value 
    }, 
  }, 


Sample: https://codesandbox.io/s/156225-vue-recordclick-forked-epo9j?file=/src/App.vue 

Regards, 
Rajapandi R

Rajapandi Ravi · Answer

Hi Shivani, 

Greetings from syncfusion support 

We have analyzed your query and we understand you want to change the dropdown datasource by making Query for the second column based on the selection value of first column. We have already discussed your requirement in our documentation. Please refer the below documentation for more information. 

Documentation: https://www.syncfusion.com/forums/163899/how-to-call-function-on-dropdownlist-change-event-in-datagrid-in-vue 

Regards, 
Rajapandi R

Shivani · Answer

Hello, This link doesn't work.

Rajapandi Ravi · Answer

Hi Shivani, 

Sorry for the inconvenience caused.   

You can achieve your requirement by using Cascading Dropdownlist. Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/ 

Regards,Rajapandi R

Shivani · Answer

Hello,Here,this.getDistrict() = function and passing countryObj.value
select value from country dorpdownlist and pass  country value to get district dropdownlist data.
how to do this in Datagrid ?

Shivani · Answer

Thank you. Rajapandi Ravi

Rajapandi Ravi · Answer

Hi Shivani, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandi R