We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid DropDown


In my application i have two drop down in grid, i want to render other drop down value based on first drop selection how i can do so? Do we have an example for grid dropdown for above scenario? Do we have onchange method for grid dropdown?

3 Replies

HJ Hariharan J V Syncfusion Team June 11, 2019 09:23 AM UTC

Hi Sandeep,

Thanks for contacting us.

Please refer the below example to achieve cascading dropdown on grid.



LA License Admin July 17, 2019 01:11 PM UTC

Hi Hariharan,


But here say for example i am adding a new column and selecting country as UnitedStates that specfic state fields are shown but when i select Australia it is still showing UnitedState states. so how can we avoid that?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 18, 2019 12:47 PM UTC

Hi Sandeep,  
Thanks for the update.  
We can set the null value to the state handling dropdownlist while changing the dataSource value to them. Refer to the following code example.  
    this.countryParams = { 
        create: () => { 
            this.countryElem = document.createElement('input'); 
            return this.countryElem; 
        destroy: () => { 
        read: () => { 
            return this.countryObj.text; 
        write: (args) => { 
            let data = this.country.filter((e) => { 
                return e.countryName == args.rowData[args.column.field]; 
            this.countryObj = new DropDownList({ 
                change: () => { 
                    this.stateObj.enabled = true; 
                    const tempQuery = new Query().where('countryId', 'equal', this.countryObj.value); 
                    this.stateObj.query = tempQuery; 
                    this.stateObj.text = ''; 
                    this.stateObj.value = null; 
                dataSource: new DataManager(this.country), 
                fields: { value: 'countryId', text: 'countryName' }, 
                floatLabelType: 'Never', 
                value: data[0].countryId, 
                placeholder: 'Select a country' 
Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon