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.
Hello !
Please tell me how to set focus to a numeric textbox from dropdownlist onvaluechange event.
After I select a dropdownlist value, I want to set the focus to a specific Syncfusyon texbox or Syncfusyon numerictextbox.
Thank You !
Here is my code :
<SfDropDownList TValue="string" TItem="Country" Placeholder="Select a country" AllowFiltering="true" DataSource="@Countries" Width="300px">
<DropDownListFieldSettings
Text="Name"
Value="Code">
</DropDownListFieldSettings>
<!--
<DropDownListEvents TItem="Country" TValue="string"
OnValueSelect="@DDL_Search_OnValueSelecthandler"
ValueChange="@DDL_Search_ValueChangeHandler" >
</DropDownListEvents>
-->
</SfDropDownList>
<div>
<SfNumericTextBox TValue="int?" Value=@NumericValue></SfNumericTextBox>
</div>
@code{
public int? NumericValue { get; set; } = 5;
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
private List<Country> Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "4208" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
new Country() { Name = "Denmark", Code = "DK" },
new Country() { Name = "France", Code = "FR" },
new Country() { Name = "Finland", Code = "FI" },
new Country() { Name = "Germany", Code = "4209" },
new Country() { Name = "Greenland", Code = "GL" },
new Country() { Name = "Hong Kong", Code = "HK" },
new Country() { Name = "India", Code = "IN" },
new Country() { Name = "Italy", Code = "IT" },
new Country() { Name = "Japan", Code = "JP" },
new Country() { Name = "Mexico", Code = "MX" },
new Country() { Name = "Norway", Code = "NO" },
new Country() { Name = "Poland", Code = "PL" },
new Country() { Name = "Switzerland", Code = "CH" },
new Country() { Name = "United Kingdom", Code = "GB" },
new Country() { Name = "United States", Code = "4210" },
};
private void DDL_Search_OnValueSelecthandler(SelectEventArgs<ArticleForDDLModel> args)
{
// Here, you can customize your code.
}
private void DDL_Search_ValueChangeHandler(ChangeEventArgs<string, ArticleForDDLModel> args)
{
// Here, you can customize your code.
}
}
Based on your requirements, you can use the "ValueChange" event of the Syncfusion dropdownlist control to set focus to a specific Syncfusion numeric textbox control. We have provided a code snippet for this below, which includes a dropdownlist control, a numeric textbox control, and event handlers for "OnValueSelect" and "ValueChange" events.
|
<div style="margin:130px auto;width:300px"> <SfDropDownList TValue="string" TItem="Country" Placeholder="Select a country" AllowFiltering="true" DataSource="@Countries" Width="300px"> <DropDownListFieldSettings Text="Name" Value="Code"> </DropDownListFieldSettings> <DropDownListEvents TItem="Country" TValue="string" OnValueSelect="@DDL_Search_OnValueSelecthandler" ValueChange="@DDL_Search_ValueChangeHandler"> </DropDownListEvents> </SfDropDownList> <hr /> <div> <SfNumericTextBox @ref="NumericObj" TValue="int?" Value=@NumericValue></SfNumericTextBox> </div> </div>
@code { public SfNumericTextBox<int?> NumericObj; public int? NumericValue { get; set; } = 5; public class Country { public string Name { get; set; } public string Code { get; set; } }
private List<Country> Countries = new List<Country> { new Country() { Name = "Australia", Code = "4208" }, new Country() { Name = "Bermuda", Code = "BM" }, new Country() { Name = "Focus NumericTextBox", Code = "FN" }, };
private async Task DDL_Search_ValueChangeHandler(ChangeEventArgs<string, Country> args) { if (args.Value == "FN") { await NumericObj.FocusAsync(); } } } |
In the above code, the "ValueChange" event handler is used to check if the selected value of the dropdownlist is equal to a specific value, which is "Focus NumericTextBox". If this condition is met, the "FocusAsync()" method of the numeric textbox control is called to set focus to it.
Sorry, but it is not working !
The focus always remains on the dropdownlist...
I am using Syncfusion Blazor Components 21.1.39
Tom,
Based on our previous updated code example, we have prepared the sample and attached it here in the attachment. we suggest you refer to the attached sample to achieve your requirement.
Regards,
Sureshkumar P
Your sample is working fine but your page doesn't work into my app.
I copied your entire page Index.razor from your sample into my project but IT IS NOT WORKING ! I am developing a Blazor Webassembly Application, not a Blazor Server like your sample is.
The focus always remains on the dropdownlist...
I am using Syncfusion Blazor Components 21.1.39
Thank You !
The issue you mentioned may be caused by the lack of an asynchronous delay between value changes, focus out events, and focus events. However, you can easily resolve this issue by introducing a delay in the change handler code. We have updated the solution code in our previous response to include a 1 millisecond delay using the Task.Delay() method.
|
private async Task DDL_Search_ValueChangeHandler(ChangeEventArgs<string, Country> args) { if (args.Value == "FN") { await Task.WhenAll(Task.Delay(1), ddlObj.FocusOutAsync(), NumericObj.FocusAsync()); } } |
Additionally, we have prepared a sample and provided it below for your reference.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Webassembly844509663
Now it is working fine !
Thank You Very Much For Your Help !
Best Regards !
Glad the solution worked for you! Let us know if you have any further questions or need further assistance.
