Grid DropDown

[License Admin]

Hi,

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?

[Hariharan J V]

Hi Sandeep,

Thanks for contacting us.

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

https://ej2.syncfusion.com/react/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/

Regards,
Hariharan

[License Admin]

Hi Hariharan,

Thanks,

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?

[Seeni Sakthi Kumar Seeni Raj]

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: () => { 

            this.countryObj.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; 

                    this.stateObj.dataBind(); 

                }, 

                dataSource: new DataManager(this.country), 

                fields: { value: 'countryId', text: 'countryName' }, 

                floatLabelType: 'Never', 

 

                value: data[0].countryId, 

                placeholder: 'Select a country' 

            }); 

            this.countryObj.appendTo(this.countryElem); 

        } 

    }; 

 

https://stackblitz.com/edit/react-bhfgma?file=index.js 

 

Regards,  

Seeni Sakthi Kumar S.