1 Answer, 1 is accepted
0
Hello Neelima,
You can use JSInterop to select the whole textbox content on focus, as per the example below. Please note that the desired behavior conflicts with a built-in behavior, so you need a JavaScript timeout.
Also, please ask the license holder at your company to assign you an active license. This will ensure your Telerik account is compliant to our license agreement and will entitle you to technical support.
@implements IDisposable
@inject IJSRuntime JS
<TelerikDatePicker @bind-Value="@DatePickerValue" Width="200px" Class="select-on-focus" />
<TelerikDatePicker @bind-Value="@DatePickerValue" Width="200px" Class="select-on-focus" />
<script>
function attachFocusHandler() {
var inputsToSelect = document.querySelectorAll(".select-on-focus input");
inputsToSelect.forEach((element) => {
element.addEventListener("focus", onInputSelect);
});
}
function detachFocusHandler() {
var inputsToSelect = document.querySelectorAll(".select-on-focus input");
inputsToSelect.forEach((element) => {
element.removeEventListener("focus", onInputSelect);
});
}
function onInputSelect(e) {
setTimeout(() => {
e.target.select();
}, 100); // use the smallest delay that works reliably
}
</script>
@code {
private DateTime DatePickerValue { get; set; } = DateTime.Today;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1);
await JS.InvokeVoidAsync("attachFocusHandler");
}
await base.OnAfterRenderAsync(firstRender);
}
public void Dispose()
{
_ = JS.InvokeVoidAsync("detachFocusHandler");
}
}
Regards,
Dimo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.