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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid DropDown

Thread ID:

Created:

Updated:

Platform:

Replies:

145153 Jun 10,2019 01:26 PM UTC Jul 18,2019 12:47 PM UTC React - EJ 2 3
loading
Tags: Grid
License Admin
Asked On June 10, 2019 01:26 PM UTC

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 [Syncfusion]
Replied On June 11, 2019 09:23 AM UTC

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
Replied On July 17, 2019 01:11 PM UTC

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 [Syncfusion]
Replied On 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: () => { 
            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); 
        } 
    }; 
 
 
Regards,  
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon