<div class="row">
<div class="col-lg-1 sb-property-border">
<div class="dropdown-wrapper">
<label class="example-label">Select a Country</label>
<SfComboBox TItem="CountryModel" TValue="string" PopupHeight="300px" PopupWidth="250px"
Placeholder="Country" @bind-Value="@DropDownValueCountry" DataSource="@CountryData" Width="250px">
<ComboBoxEvents TItem="CountryModel" TValue="string" ValueChange="OnChangeCountry" />
<ComboBoxFieldSettings Text="CountryName" Value="CountryCd" />
</SfComboBox>
</div>
</div>
<div class="col-lg-1 sb-property-border">
</div>
<div class="col-lg-1 sb-property-border">
<div class="dropdown-wrapper">
<label class="example-label">Select a State</label>
<SfComboBox TItem="StateModel" TValue="string" PopupHeight="300px" PopupWidth="250px"
Placeholder="State" @bind-Value="@DropDownValueState" DataSource="@StateData" Width="250px">
<ComboBoxEvents TItem="StateModel" TValue="string" ValueChange="OnChangeState" />
<ComboBoxFieldSettings Text="StateName" Value="StateId" />
</SfComboBox>
</div>
</div>
</div>
@code
{
:
:
public async void OnChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CountryModel> args)
{
StateData = await StateService.GetAllStates(args.ItemData.CountryCd);
}
}
How can I refresh the second combobox that it shows current data instead of the data from the previous selection?
Hi Uwe Jädick,
We have validated the reported query on our end. Unfortunately, we weren’t able to reproduce the reported issue as per your scenario.
Also, we request that you provide additional details about the issue, as mentioned below. This will help us validate the issue further and provide you with a better solution.
1.) Syncfusion Verion 22.2.9
2.) Video: Loom: Troubleshooting Drop-Downless Combo Boxes
3.) Debugger shows: CountryCd is correct and StateDate is popuated properly with the states of the selected country
public async void OnChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CountryModel> args)
{
StateData = await StateService.GetAllStates(args.ItemData.CountryCd);
}
ComboBox: Country
<div class="row">
<div class="col-lg-1 sb-property-border">
<div class="dropdown-wrapper">
<label class="example-label">Select a Country</label>
<SfComboBox TItem="CountryModel"
TValue="string"
PopupHeight="300px"
PopupWidth="250px"
Placeholder="Country" @bind-Value="@DropDownValueCountry"
DataSource="@CountryData"
Width="250px">
<ComboBoxEvents TItem="CountryModel" TValue="string" ValueChange="OnChangeCountry" />
<ComboBoxFieldSettings Text="CountryName" Value="CountryCd" />
</SfComboBox>
</div>
</div>
ComboBox State:
Hi Uwe Jädick,
We have thoroughly investigated the issue and were able to replicate it on our end. To address this issue and ensure the second combobox displays the correct and up-to-date data, we recommend incorporating the following solution into your code:
[Index.razor]
public async void OnChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CountryModel> args) { StateData = await StateService.GetAllStates(args.ItemData.CountryCd); StateHasChanged(); DropDownValueState = null; // Reset selected state when changing country } |
By adding the StateHasChanged method call as shown above, you ensure that the user interface updates to reflect the newly fetched data in the second combobox. This should effectively resolve the issue you've reported.
For your convenience, we've also prepared a simple example that demonstrates this solution. You can review the example provided and verify if it successfully resolves the concern at your end.
Great, it is almost perfect. Changing the Country, now shows the Key Value (e.g. BKK for Bangkok) of the State from the previous selection. But it works a lot better than before. Maybe you have a suggestion to avoid this glitch as well.
Thanks a lot for your help.
Hi Uwe Jädick,
Thank you for your update. We're pleased to hear that your issue has been mostly resolved and that the component is performing better now. Your feedback is greatly appreciated.
You mentioned encountering a glitch in the component despite the improvements. To better assist you, we kindly request more details regarding this glitch. Sharing additional context about the exact use case where the glitch occurs would be immensely helpful. If possible, providing a video illustration of the issue could significantly aid us in understanding the problem.
By sharing these insights with us, you're helping us gain a clearer picture of the situation, allowing us to validate the issue more effectively and offer you an even more refined solution.