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

[Shivani]

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]

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]

Hello, This link doesn't work. 

[Rajapandi Ravi]

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]

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 ?

[Rajapandi Ravi]

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 

[Shivani]

Thank you. Rajapandi Ravi 

[Rajapandi Ravi]

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