1. Home
  2. Forum
  3. Blazor
  4. ValueChange event is not fired when DropDownList value is changed in OnInitializedAsync event.

ValueChange event is not fired when DropDownList value is changed in OnInitializedAsync event.

Hi
I can't speak English. So I use Google Translate.
Please understand if the explanation is not natural.

I set a value in the DropDownList when the page loads. And I want the ValueChange event to fire.
I tested it with a combobox, but it is the same.
Any help would be appreciated.

- my code -
<div class="form-group col-md-8">
    <SfDropDownList ID="Job-Status" @bind-Value="@val" TValue="string" DataSource="@DataSource" TItem="Countries">
        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
        <DropDownListEvents TValue="string" TItem="Countries" ValueChange="OnValueChange" OnValueSelect="OnValueSelect"></DropDownListEvents>
    </SfDropDownList>
</div>

@code {
    private string val { get; set; }
    public List<Countries> DataSource = new List<Countries>();

    protected override async Task OnInitializedAsync()
    {
        DataSource = await ownservice.GetDataAsync();
        this.val = await ownservice.GetPreSelectDataAsync();   // Change Value
        this.StateHasChanged();
    }

    public void OnValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)
    {
          // Event not fire
    }

    public void OnValueSelect(Syncfusion.Blazor.DropDowns.SelectEventArgs<Countries> args)
    {
          // Event not fire
    }
}

7 Replies 1 reply marked as answer
SP Sureshkumar P Syncfusion Team October 6, 2020 11:54 AM UTC

Hi JaeHyeong, 
 
Greetings from Syncfusion support. 
 
Based on your shared information with code example, we have created the sample and the reported change event is fired when set the value in the OnInitializedAsync method. 
 
 
If still you have facing the issue, then please replicate the issue in the above attached sample and revert us with detailed issue replication procedure to provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar P 


JJ JaeHyeong Jang October 7, 2020 03:54 AM UTC

Hi

Thanks for the reply and sample source.
Your sample fires the ValueChanged event.

I've added my source to your sample and tested it.
The source is attached, so please check it.

-Changed source code-
1. I added the CompanyDataProvider class file to the Data folder.
2. The following contents were added to the ConfigureServices function of the Startup.cs class.
    services.AddSingleton<CompanyDataProvider.ICompanyRepository, CompanyDataProvider.CompanyRepository>();
3. A ComboBox that uses the same DataSource as the DropDownList DataSource was added to Index.razor.
4. I added a ComboBox that uses my data to Index.razor.

-Query-
1. The ComboBox I created does not fire the ValueChanged event. Please help.
2. DropDownList changed its value in OnInitializedAsync, but when I run it, the item is not selected.
3. When I run a ComboBox that uses the same DataSource as the DropDownList, the item is selected but it shows 1.

Any help to me would be appreciated.

Attachment: DropDownDataSource_1e14f7b6.zip

SP Sureshkumar P Syncfusion Team October 7, 2020 10:42 AM UTC

Hi JaeHyeong, 
 
Thanks for your update. 
 
Based on your shared information, we would like to say this when trigger the OnInitializedAsync method. The component does not render so our updated value treats like as preselected value. That is the reason the component change event does not render in that stage. 
 
 
Regards, 
Sureshkumar P 


JJ JaeHyeong Jang October 7, 2020 02:27 PM UTC

Hi

Thanks for the reply and sample source.
I have checked your sample source.
I confirmed that I removed the 'Index' property from the DropDownList.
But the ValueChanged event is not fired.

What I want is that when the Page is loaded, the initial value is set in the ComboxBox or DropDownList and the ValueChanged event is fired at the same time.

Is this impossible?
Please help if possible.

SP Sureshkumar P Syncfusion Team October 8, 2020 10:51 AM UTC

Hi JaeHyeong, 

Thanks for your update. 
 
You can set the component value in the OnAfterRenderAsync method to achieve your requirement.  
 
Please find the modified code here:  
@code { 
    SfDropDownList<int?, SpareNameViewModel> ddl1; 
    public IEnumerable<SpareNameViewModel> customData { get; set; } 
    public int? DDLValue { get; set; } 
    public int? CBBValue { get; set; } 
 
    IEnumerable<CompanyDataProvider.Company> companyData { get; set; } 
    string selectedCompany { get; set; } 
 
    protected override async Task OnInitializedAsync() 
    { 
        await base.OnInitializedAsync(); 
 
        customData = await ForecastService.GetSpareNamesAsync(); 
        companyData = await CompanyProvider.GetSearch();    // My Data 
        this.StateHasChanged(); 
    } 
 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            this.DDLValue = await ForecastService.GetSpareNamesValueAsync();   // DropDownList Change Value 
            this.CBBValue = await ForecastService.GetSpareNamesValueAsync();   // ComboBox Change Value 
            this.selectedCompany = "1"; // My ComboBox Change Value 
            this.StateHasChanged(); 
        } 
 
    } 
 
    private void onValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, SpareNameViewModel> args) 
    { 
    } 
 
    public void cbbOnValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, SpareNameViewModel> args) 
    { 
    } 
 
    public void cbbCompanyValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CompanyDataProvider.Company> args) 
    { 
    } 
} 
 
 
 
Regards, 
Sureshkumar P 
 


Marked as answer
JJ JaeHyeong Jang October 8, 2020 01:40 PM UTC

Hi

It works perfectly.
It was a great help.
Thank you.

SP Sureshkumar P Syncfusion Team October 9, 2020 08:42 AM UTC

Hi JaeHyeong, 
 
Thanks for your update. 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon