Trying to Set Focus to textbox in Blazor

Radzen Studio Blazor Server
1

Does anyone have a tutorial on how i would go about setting focus to a textbox on page load, or change?

2

Here is an example:

await JSRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""textbox0"").focus()")

image
image1920×1080 121 KB

image
image1920×1080 140 KB

image
image1920×1080 66.6 KB

1 Like
3

I can't get this to work using Blazor Radzen on a Blazor Web Assembly project. Here's my textbox

<Radzen.Blazor.RadzenTextBox @bind-Value=@glJournalBatchIn.EditBatchDesc Name="EditBatchDesc" Style="width:100%" />

The Invoke
{ await JSRuntime.InvokeVoidAsync("EditBatchDesc", $@"document.getElementById(""EditBatchDesc"").focus()"); }

It fires, but I get this error:
at do_icall (:wasm-function[10596]:0x194e58)
Microsoft.JSInterop.JSException: Could not find 'EditBatchDesc' ('EditBatchDesc' was undefined).
Error: Could not find 'EditBatchDesc' ('EditBatchDesc' was undefined).
at https://localhost:44346/_framework/blazor.webassembly.js:1:1287

4

You are missing id attribute

5

Thank you for the quick reply. Can you be more specific? What do you mean by Id Attribute? I don't see it. I'm new to Radzen and using Visual Studio .Net 5 project. I thought Name="EditBatchDesc" was the Id of the textbox. Can you give me an example of how the RadzenTextBox should be? Thanks!

6

Name property will be rendered as name attribute of the input. There is no Id property - you just need to set id attribute - nothing else. All Radzen Blazor components can handle arbitrary attributes:

7

Thank you for the link. However I am still getting an error after I add the id attribute:

With id="EditBatchDesc" added.
RadzenTextBox id="EditBatchDesc" @bind-Value=@glJournalBatchIn.EditBatchDesc Name="EditBatchDesc" TabIndex="0"

Now new error:
Microsoft.JSInterop.JSException: The value 'EditBatchDesc' is not a function.
Error: The value 'EditBatchDesc' is not a function.

Regards,
Eric

8

The original answer uses "eval" as the first parameter of InvokeVoidAsync ... Check it again and fix your code.

9

Thank you korchev - Yes Sir, that did the trick! I couldn't tell what "eval" was because the original post didn't show any of the other lines of code that were involved, so I was guessing. When I was using it earlier, I didn't have the id= on the textbox so I had changed it in troubleshooting effort. Thanks!

10

I tried to run your example but i have the follow error:
'JSRuntime' does'not contains a definiton for 'InvokeVoidAsync' What do you suggest to do?

File .radzen:
<RadzenDropDown style="width: 100%;" Name="Payment" 
   @bind-Value="@Payment" Placeholder="Payment" Data="@ListPayment"
   TextProperty="Description" ValueProperty="Id">
</RadzenDropDown>

File .cs:
using Microsoft.JSInterop;
await JSRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""Payment"").focus()");
11

Hey @AndreaSpada,

You need to inject JSRuntime:

@inject IJSRuntime JSRuntime;

Please do not post duplicate threads.

12

Sir, I've tried this & It's Working for Textbox, However it's Not Working for Numeric Input,
Do I need to change something in my Code???

13

RadzenNumeric has its own FocusAsync method: https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenNumeric.razor.cs#L280

14

I'm using .Net core 3.0

15

Sir, can you be more specific, How can i implement this???
regards

16

Sir, I've tried this,
An error is showing up Saying "Element Reference is not Configured properly"

Please HELP

17

I can't reproduce such an error. If you have a Radzen Professional subscription you can send us your project to troubleshoot it further.

18