How distinguish a User select event from a binded field value change

[CageE]

In Blazor components that are possible to bind-value to a field or property and at the same time using ValueChange events, how can we distinguish if the value is changed by user or by the binded field during the event handling?

Let's say we have the following DropDownList:

<SfDropDownList TValue="Interval" TItem="Interval" Placeholder="Select an interval" DataSource="@Intervals" @bind-Value="@_selectedInterval">

         <DropDownListFieldSettings Text="Title" />

         <DropDownListEvents TItem="Interval" TValue="Interval" ValueChange="OnSelectedCandleIntervalChange" />

</SfDropDownList>

Since we are binding the value to _selectedInterval, whenever either the user selects a new item or when the value of the _selectedInterval is changed programmatically by some other parts of the app, the event is triggered. How can we distinguish these two when handling the event in "OnSelectedCandleIntervalChange"? Is this possible at all? 
Otherwise what is the best practice for scenarios where we need to change the value of the field programmatically somewhere else but still reflect the change in the dropdownList? In other words, show the actual updated value in the component to the user but somehow skip the event handling, kind of user-triggered-ValueChange event.

[Sureshkumar P]

Hi CageE,

You can separate the value change scenario by using the change event argument isInteracted property. When component change is triggered after selecting the popup value then isInteracted is returned as true other scenarios like external button click change the component value is returned as false.

Find the code example here:

<SfDropDownList id="ddl" TValue="string" CssClass="form-control-sm" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@Name" DataSource="@Country">

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

    <DropDownListEvents TItem="Countries" TValue="string" ValueChange="@OnSelectedCandleIntervalChange" />

</SfDropDownList>

 

<button @onclick="ExternalValueChange">ExternalValueChange</button>

 

@code {

    void OnSelectedCandleIntervalChange(ChangeEventArgs<string, Countries> args)

    {

        if(args.IsInteracted){

            // component's internal select option

        } else {

            // external value change using button click

        }

 

    }

 

    void ExternalValueChange(){

        this.Name = "BM";

    }

    public string Name { 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" },

    };

}

 

Find the screenshot for the button click changes the value:

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

[CageE]

Great answer, thank you. 

[Sureshkumar P]

Hi CageE,

Thanks for your update.

Regards,

Sureshkumar P