Problem about Cascading DropDownList with Grid editing in React Grid component

Question

I have checked the link about the Cascading DropDownList with Grid editing in React Grid component link:

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

In the sample, when the user changes the ship country, the drop-down list of ship state will be changed.

the United States is relation with [New Tork, Virginia and Washington]

and Australia is relation with [Queensland, Tasmania and Victoria]

But I can First Select Australia in the country field and select the Victoria, then change to the country to the United States can still save.

I want to ask how to make sure the country must relate to its state?

Sujith Kumar Rajkumar · Answer

Hi Customer, 

Greetings from Syncfusion support. 

In the cascading dropdown list the second dropdown’s data is assigned from a query generated based on the first dropdown’s selected value. So when United States is selected the query is formed based on this which returns its related states. Please let us know if one of the following is what you require to achieve, 

If you want the country to be related to the state then it would allow the first dropdown value to be selected only once and the second dropdown data will remain related to the first dropdown value. Like for e.g. – Consider initially ‘Australia’ is selected from the first dropdown. In the first dropdown’s change event query will be generated based on this value which will then be assigned to the second dropdown and data will be bound. Now based on this query the second dropdown will display the states related to ‘Australia’. Now after this when you go back to the first dropdown since the selected states are related to ‘Australia’, you can disable/prevent selection to the first dropdown thus not allowing to change the value. Since the first dropdown is restricted from changing now, the second dropdown only allows selecting from the states related to ‘Australia’.
Another option would be to clear the second dropdown value and then move it to focus each time the first dropdown value is modified. Now whenever the first dropdown value is updated the second dropdown also needs to be updated accordingly.

If your requirement does not come under the above please elaborate it to us. Based on your response we will update the further details. 

Let us know if you have any concerns. 

Regards, 
Sujith R

developer · Answer

Can you provide the source code for the second option?Thank you

Sujith Kumar Rajkumar · Answer

Hi Customer, 

Thanks for the update. 

You can achieve this requirement by removing the second dropdown’s value and focusing its element in the first dropdown’s change event as demonstrated in the below code snippet, 





// First dropdown’s edit params function 
this.countryParams = { 
                . 
                . 
      write: (args) => { 
        this.countryObj = new DropDownList({ 
          change: () => { 
                . 
                . 
            // The second dropdown’s value is cleared and focused 
            this.stateObj.text = null; 
            this.stateObj.dataBind(); 
            this.stateElem.focus(); 
          }, 
                . 
                . 
      } 
}; 

We have prepared a sample based on this for your reference which you can find below, 

Sample: https://stackblitz.com/edit/react-tpb2tq?file=data.js 

Please get back to us if you require any further assistance. 
  
Regards, 
Sujith R