Unplanned
Last Updated:
09 Oct 2020 10:36
by ADMIN
Marco
Created on:
09 Oct 2020 10:36
Category:
ComboBox
Type:
Feature Request
ComboBox to select all text when clicking in it to type
Would be fine if when you click on a filterable combobox the whole text in it will be selected, so you can click and start digit new text filter without delete the old text before.
---
ADMIN EDIT
This should probably be behind a flag to keep the original behavior.
At the moment, you can achieve it with a bit of JS to focus and select all the text:
<script>
function selectAllText(parentElem) {
let input = parentElem.querySelector(".k-input");
if (input && input.focus) {
input.select();
}
}
</script>
Which you can call with the approach from this article:
@inject IJSRuntime _js
@SelectedValue
<br />
<span @onfocusin="@SelectAllText" @ref="@spanRef">
<TelerikComboBox Data="@Data"
Filterable="true" FilterOperator="@StringFilterOperator.Contains"
Placeholder="Find product by typing part of its name"
@bind-Value="@SelectedValue"
TextField="ProductName" ValueField="ProductName" AllowCustom="true">
</TelerikComboBox>
</span>
@code {
ElementReference spanRef { get; set; }
async Task SelectAllText()
{
await _js.InvokeVoidAsync("selectAllText", spanRef);
}
public List<Product> Data { get; set; }
public string SelectedValue { get; set; }
protected override void OnInitialized()
{
List<Product> products = new List<Product>();
for (int i = 0; i < 20; i++)
{
products.Add(new Product()
{
ProductId = i,
ProductName = $"Product {i}"
});
}
Data = products;
base.OnInitialized();
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
}
}
0 comments