Problems with DataGrid being refreshed after DropDownList change event in Blazor.

[Christopher Bell]

I have page with a DropDownList populated with countries.  Under the DropDownList I have a DataGrid which displays cities linked to the country selected from the DropDownList.  The data is held in a Microsoft SQL database, and I’m using Dapper for CRUD operations.

Initially I appeared to be getting random behaviour where the ValueChange on the DropDownListEvents didn’t appear to be working.  However, following a lot of investigation, under certain, reproduceable, situations the DataGrid fails to display the correct data.  In general, if I select two countries (A then B) each with a city associated with them, followed by a country (C) with no associated city, followed by country D (which has an associated city), then back to country B again,  then the DataGrid displays the city associated with country D.  (Note: country D could be country A.)

Is there a problem with the DataGrid?  The “Cities_GetByCountry” seems to be

Please see the linked YouTube video: https://youtu.be/kQGorcdi0tQ

The HTML and code for the page is shown below: (I am happy to share any other information you require).  Using 18.3.0.48

@page "/countriesandcities"

@using BlazorCountries.Data

@inject ICountriesService CountriesService

@inject ICitiesService CitiesService

 

<h3>Countries and Cities</h3>

 

<div class="control_wrapper">

    <SfDropDownList TItem="Countries"

                    TValue="int"

                    DataSource="@countries"

                    Placeholder="Select a country"

                    PopupHeight="200px"

                    PopupWidth="250px">

        <DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings>

        <DropDownListEvents TItem="Countries" TValue="int" ValueChange="@OnChange"></DropDownListEvents>

    </SfDropDownList>

</div>

 

<br />

 

<div>

    <SfGrid @ref="CitiesGrid"

            DataSource="@cities"

            AllowSorting="true"

            AllowResizing="true"

            Height="200">

        <GridColumns>

            <GridColumn Field="@nameof(Cities.CityId)"

                        HeaderText="City ID"

                        TextAlign="@TextAlign.Left"

                        Width="20">

            </GridColumn>

            <GridColumn Field="@nameof(Cities.CountryId)"

                        HeaderText="Country ID"

                        TextAlign="@TextAlign.Left"

                        Width="20">

            </GridColumn>

            <GridColumn Field="@nameof(Cities.CityName)"

                        HeaderText="City Name"

                        TextAlign="@TextAlign.Left"

                        Width="50">

            </GridColumn>

            <GridColumn Field="@nameof(Cities.CityPopulation)"

                        HeaderText="Population"

                        Format="n"

                        TextAlign="@TextAlign.Right"

                        Width="50">

            </GridColumn>

        </GridColumns>

    </SfGrid>

</div>

 

<style>

    .control_wrapper {

        width: 250px;

    }

</style>

 

@code{

 

    IEnumerable<Countries> countries;

    IEnumerable<Cities> cities;

 

    SfGrid<Cities> CitiesGrid;

 

    [Parameter]

    public int SelectedCountryId { get; set; } = 0;

 

    protected override async Task OnInitializedAsync()

    {

        //Populate the list of countries objects from the Countries table.

        countries = await CountriesService.CountriesGetAll();

    }

 

 

    private async Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, Countries> args)

    {

        SelectedCountryId = args.ItemData.CountryId;

        cities = await CitiesService.Cities_GetByCountry(this.SelectedCountryId);

        CitiesGrid.Refresh();

        this.StateHasChanged();

    }

}

 

The code for the service that gets the data is:

public async Task<IEnumerable<Cities>> Cities_GetByCountry(int @CountryId)

        {

            IEnumerable<Cities> cities;

            var parameters = new DynamicParameters();

            parameters.Add("CountryId", CountryId, DbType.Int32);

            using (var conn = new SqlConnection(_configuration.Value))

            {

                cities = await conn.QueryAsync<Cities>("spCities_GetByCountry", parameters, commandType: CommandType.StoredProcedure);

            }

            return cities;

        }

[Rahul Narayanasamy]

Hi Christopher, 

Greetings from Syncfusion. 

Query: Problems with DataGrid being refreshed after DropDownList change event in Blazor. 

We have validated your query with the provided information. We have prepared a simple sample based on your shared code snippets and checked the reported problem at our end. We could not reproduce the reported problem at our end. Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/160190/ze/BlazorApp1Sample795603345  

If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution. 

• Could you please ensure that the correct data is returned from your service(cities data) in Dropdown value change event?
• Reproduce the problem in the provided sample and revert back to us.
• Share a simple reproduceable sample if possible.

Regards, 

Rahul 

[Christopher Bell]

Hi Rahul

Thank you for your prompt response to my query.  I have reproduced the problem using exactly the same code you supplied in your example, with the only change being that I have substituted data for countries and cities, as shown below:

    List<Countries> countries = new List<Countries> {

    new Countries() { CountryId= 248, CountryName= "France" },

    new Countries() { CountryId= 249, CountryName= "Germany" },

    new Countries() { CountryId= 250, CountryName= "Finland" },

    new Countries() { CountryId= 251, CountryName= "Spain" },

    new Countries() { CountryId= 252, CountryName= "Portugal" },

    new Countries() { CountryId= 253, CountryName= "Italy" },

    new Countries() { CountryId= 254, CountryName= "Sweden" },

    new Countries() { CountryId= 255, CountryName= "Norway"}

  };

    protected override void OnInitialized()

    {

        cities = new List<Cities>

        {

            new Cities() { CityId = 10248,CountryId = 248, CityName = "Paris", CityPopulation = 3238 },

            new Cities() { CityId = 10249,CountryId = 249, CityName = "Berlin", CityPopulation = 1161 },

            //new Cities() { CityId = 10250,CountryId = 250, CityName = "Helsinki", CityPopulation = 6583 },

            new Cities() { CityId = 10251,CountryId = 251, CityName = "Madrid", CityPopulation = 4134 },

            new Cities() { CityId = 10252,CountryId = 252, CityName = "Lisbon", CityPopulation = 513 },

            new Cities() { CityId = 10253,CountryId = 253, CityName = "Rome", CityPopulation = 5817 },

            //new Cities() { CityId = 10254,CountryId = 254, CityName = "Stockholm", CityPopulation = 2298 },

            new Cities() { CityId = 10255,CountryId = 255, CityName = "Oslo", CityPopulation = 14833 },

        };

    }

Notice that I have commented out the cities data for Helsinki (country = Finland) and Stockholm (country = Sweden).  This is important as the error occurs after previously selecting an item from the DropDown List that does not return any data to the DataGrid.

I have explained the sequence to follow in this YouTube video (this time with sound).  https://youtu.be/XdByze1PyQc

This behaviour does seem very odd!

Thanks in advance.

Christopher.

[Rahul Narayanasamy]

Hi Christopher, 

Thanks  for your patience. 

We have validated your query and considered your reported problem as a bug and logged the defect report “Grid does not refresh properly while changing the datasource after emptying Grid DataSource dynamically”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming patch release which is expected to be rolled out on or before mid of January, 2021. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.     

     

https://www.syncfusion.com/feedback/20438/grid-does-not-refresh-properly-while-changing-the-datasource-after-emptying-grid 

     

Until then we appreciate your patience. 

Regards, 

Rahul 

[Christopher Bell]

Hi Rahul

Many thanks.

It's good to know I'm not going mad!

Chris

[Rahul Narayanasamy]

Hi Christopher, 

 

Thanks for the update. 

 

We will notify you once the fix included and successfully rolled out. Until then we appreciate your patience. 

 

Regards, 

Rahul 

[Manuel]

I think this problem has not been solved yet... any news?

I have a SDropDownList  in a Grid dialog and when a Query ( from other SdropDownList) is applied to it, the second SDropDownList is not refreshed

[Vignesh Natarajan]

Hi Manuel,

Thanks for contacting Syncfusion support.

We understand that you want to achieve cascading DropDownList behavior in Grid edit mode. We have already documented this topic in our UG documentation which can be referred to below

https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

[Manuel]

Many thanks

[Vignesh Natarajan]

Thanks for the update. Please get back to us if you have further queries.