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. Image for the cookie policy date

Dropdown List bind-Value eventcallback empty upon selecting the same item.

To start, this Dropdown list is in a component that is used as an area selector - the areas that someone might have access to changes dynamically so the dropdown list is populated dynamically. Objects inside the dropdown list aren't necessarily the same object even if they have the same value.

The data source is a list of Data objects (with string fields Name and Id) populated by OnOpenHandler using an HTTP client. @bind-Value is bound to the BoundValue field with the getter/setter shown below which trigger the SelectedIdChanged event callback which updates the SelectedId in the parent component.

When selecting the same item (an item with the same value) from the dropdown list, this event callback is setting SelectedId in the parent component to empty - I have a feeling it has to do with the SfDropDownList @bind-Value. Any advice?


<SfDropDownList @bind-Value="@BoundValue" @bind-Name=@Name DataSource="@List">
    <DropDownListEvents TItem="Data" TValue="string" OnOpen="@OnOpenHandler"></DropDownListEvents>
    <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
    <DropDownListTemplates TItem="Data">
        <ItemTemplate>
            @((context as LawData).Name)
        </ItemTemplate>
    </DropDownListTemplates>
</SfDropDownList>


    [Parameter]
    public string SelectedId { get; set; } = "";

    [Parameter]
    public EventCallback<string> SelectedIdChanged { get; set; }

    private string BoundValue
    {
        get => SelectedId;
        set
        {
            SelectedId = value;
            SelectedIdChanged.InvokeAsync(SelectedId);
        }
    }

3 Replies

SP Sureshkumar P Syncfusion Team January 24, 2023 08:29 AM UTC

Hi Kyle,


You can achieve your desired outcome by modifying the values of both the child and parent components, as demonstrated in the following code example. When utilizing two-way binding in the child component, it is necessary to also use the "value" and "valuechanged" properties in the parent component to accurately reflect the two-way bound variable in the parent component.


Find the code changed in your attached code:

[parent component]

 

@using System.Linq.Expressions;

@using Syncfusion.Blazor.DropDowns

 

@typeparam TVal;

@typeparam TItemss;

 

<SfDropDownList Value="@Value" ValueChanged="ValueChanged"  ValueExpression="@ValueExpression" TValue="TVal" TItem="TItemss" ShowClearButton="true" Placeholder="e.g. Australia" DataSource="@Country">

    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>

</SfDropDownList>

 

 

@code

{

    [Parameter]

    public List<TItemss> Country { get; set; }

    private TVal _value { get; set; }

    [Parameter]

    public string ID { get; set; }

    [Parameter]

    public Expression<Func<TVal>> ValueExpression { get; set; }

    [Parameter]

    public TVal Value

    {

        get => _value;

        set

        {

            if (!EqualityComparer<TVal>.Default.Equals(value, _value))

            {

                _value = value;

                ValueChanged.InvokeAsync(value);

            }

        }

    }

    [Parameter]

    public EventCallback<TVal> ValueChanged { get; set; }

 

}

 


[child component]

<DropdownListFeatures TVal="string" TItemss="Countries" Country="@Country" @bind-Value="@NameCustom">

            </DropdownListFeatures>

 

 

 

 

@code {

 

    public string NameCustom { get; set; }

 

    public class Countries

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

 

    List<Countries> Country = new List<Countries>

    {

        new Countries() { Name = "Australia", Code = "AU" },

        new Countries() { Name = "Bermuda", Code = "BM" },

        new Countries() { Name = "Canada", Code = "CA" },

        new Countries() { Name = "Cameroon", Code = "CM" },

        new Countries() { Name = "Denmark", Code = "DK" },

        new Countries() { Name = "France", Code = "FR" },

        new Countries() { Name = "Finland", Code = "FI" },

        new Countries() { Name = "Germany", Code = "DE" },

        new Countries() { Name = "Greenland", Code = "GL" },

        new Countries() { Name = "Hong Kong", Code = "HK" },

        new Countries() { Name = "India", Code = "IN" },

        new Countries() { Name = "Italy", Code = "IT" },

        new Countries() { Name = "Japan", Code = "JP" },

        new Countries() { Name = "Mexico", Code = "MX" },

        new Countries() { Name = "Norway", Code = "NO" },

        new Countries() { Name = "Poland", Code = "PL" },

        new Countries() { Name = "Switzerland", Code = "CH" },

        new Countries() { Name = "United Kingdom", Code = "GB" },

        new Countries() { Name = "United States", Code = "US" },

    };

 

}


Find the modified sample in the attachment.


Regards,

Sureshkumar P


Attachment: DDLServer_2d483d33.zip


KW Kyle White January 24, 2023 05:55 PM UTC

Sorry, I had my parent-child terminology backwards, we are trying to pass the selected value from the parent (in your sample's case, DropdownListFeatures) to the child component (Index). The child is not passing any parameters or values into the dropdown list parent component.


The data list is being generated dynamically by a subroutine in the parent component - we cannot expect the data list to be the same each time, but when selecting an item with the same value after the subroutine runs a second time, the child component is receiving a null value from the event callback.


When I attempted to update my code to match your solution, it caused the application to hang when accessing the page with the child component.



SS Shereen Shajahan Syncfusion Team January 25, 2023 11:54 AM UTC

Hi Kyle,

To look into your issue further, we have created a ticket for your query. Please check the ticket for further updates. 

Regards,

Shereen


Loader.
Up arrow icon