Textbox Focus

[Vishnu]

Hi,

I have modal popup and I need to add Textbox Focus in first field in the window on loading.

 

 

Thanks,

Vishnu Vardhanan

[Apostolos]

Hello Vishnu,

All our input components offer a FocusAsync method that lets you focus them programmatically.

To implement the functionality, I'll provide the following step by step guidance:

• Add a reference to the textbox that you want to focus:
  

  <TelerikTextBox @ref="@TextboxRef" />
  
  @code {
    TelerikTextBox TextboxRef { get; set; }
  }

• When you set the Window's Visible attribute to true and the popup renders, the Blazor framework will fire the OnAfterRenderAsync event.
• The OnAfterRenderAsync handler is the place to focus the desired textbox. Note that you will need a small delay ( await Task.Delay(300) ) to wait for the textbox JavaScript instance to initialize.
• The OnAfterRenderAsync event fires a lot of times during the page life cycle. You will need a boolean flag to detect when to focus the textbox (e.g. FocusFlag ). Set this flag to true when you set the Window Visible attribute to true.

The following snippet demonstrates the above instructions. I also created this REPL example that you can use as reference.

<TelerikWindow @bind-Visible="@WindowIsVisible" Width="250px">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        <label for="name">Name</label>
        <br />
        <TelerikTextBox @ref="@TextboxRef" Id="name"></TelerikTextBox>
        <br />
        <label for="email">Email</label>
        <br />
        <TelerikTextBox InputMode="email" Id="email"></TelerikTextBox>
    </WindowContent>
</TelerikWindow>

<TelerikButton OnClick="@ToggleWindow">Open Window and Focus TextBox</TelerikButton>

@code {

    bool FocusFlag { get; set; } = false;
    bool WindowIsVisible { get; set; }
    TelerikTextBox TextboxRef { get; set; }

    async Task ToggleWindow()
    {
        WindowIsVisible = !WindowIsVisible;
        if (WindowIsVisible)
        {
            FocusFlag = true;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (WindowIsVisible && FocusFlag)
        {
            FocusFlag = false;
            await Task.Delay(300);
            await TextboxRef.FocusAsync();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Regards,
Apostolos
Progress Telerik

[Vishnu]

Hi Team,

Thanks for the update. Above is for the button click event. I need for Page Intialization and I have tried for Page Intialization and it's not working. Could please update on the same.

[Vishnu]

Could you please update on the same

Thanks,

Vishnu Vardhanan