ComboBoy shows old data instead of current data

    <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?


5 Replies

KP Kokila Poovendran Syncfusion Team August 17, 2023 01:10 PM UTC

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.


  • Issue a reproducible sample (or modify the shared sample as per your scenario).
  • Your Syncfusion package version.
  • Video illustration if applicable. 



Attachment: BlazorServerProject_cb728f57.zip


UJ Uwe Jädick August 18, 2023 02:27 AM UTC

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:




KP Kokila Poovendran Syncfusion Team August 18, 2023 02:10 PM UTC

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.




Attachment: BlazorServerProject_44b799f6.zip


UJ Uwe Jädick August 18, 2023 02:37 PM UTC

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.



KP Kokila Poovendran Syncfusion Team August 21, 2023 05:25 PM UTC

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.


Loader.
Up arrow icon