I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.
This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.
---
ADMIN EDIT
Here is one workaround you can consider:
https://blazorrepl.telerik.com/QoOAPyEZ233YP2AX19
@inject IJSRuntime js
@* Move this script to a separate JS file *@
<script suppress-error="BL9992">
function getHighligtedComboItem() {
// Get the currently focused item in this particular ComboBox.
var focusedItem = document.querySelector(".select-on-tab .k-list-item.k-focus");
if (focusedItem) {
return focusedItem.innerText;
}
}
</script>
<p>FirstFilteredItem: @FirstFilteredItem</p>
<p>Selected value: @ComboBoxValue</p>
<span onkeyup="@GetFirstFilteredItem">
<TelerikComboBox Data="@ComboBoxData"
Value="@ComboBoxValue"
ValueChanged="@( (int newValue) => ComboBoxValueChanged(newValue) )"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Value)"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
OnBlur="@SelectItemOnTab"
OnOpen="@( () => IsComboBoxOpen = true )"
OnClose="@( () => IsComboBoxOpen = false )"
Placeholder="Select an item..."
ClearButton="true"
Width="200px">
<ComboBoxSettings>
<ComboBoxPopupSettings Class="select-on-tab" />
</ComboBoxSettings>
</TelerikComboBox>
</span>
<input placeholder="another form element" />
@code {
private IEnumerable<ListItem> ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });
private int ComboBoxValue { get; set; }
private string FirstFilteredItem { get; set; } = string.Empty;
private bool IsComboBoxOpen { get; set; }
private async Task GetFirstFilteredItem(KeyboardEventArgs args)
{
if (!IsComboBoxOpen)
{
// Wait at least 300ms, which is the opening animation.
await Task.Delay(400);
}
else
{
// Wait, depending on the typical filtering time.
await Task.Delay(300);
}
// The code that will find the item text depends on the exact scenario and potential use of ItemTemplate.
FirstFilteredItem = await js.InvokeAsync<string>("getHighligtedComboItem");
}
private void SelectItemOnTab()
{
if (!string.IsNullOrEmpty(FirstFilteredItem))
{
// Match the filter operation to the filter operator of the ComboBox.
var matchingItem = ComboBoxData.Where(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant())).FirstOrDefault();
if (matchingItem != null)
{
ComboBoxValue = matchingItem.Value;
FirstFilteredItem = string.Empty;
}
}
}
private void ComboBoxValueChanged(int newValue)
{
ComboBoxValue = newValue;
FirstFilteredItem = string.Empty;
}
public class ListItem
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
}
The tablet that I am using is slightly wider than the medium breakpoints set in AdaptiveMode.Auto. However, I still want to show the action sheet. I'd like to be able to configure the breakpoints which are currently hard-coded.
===
ADMIN EDIT
===
The request is opened for ComboBox but it also targets other selects and pickers that have AdaptiveMode feature. For example, DropDownList, MultiSelect, DatePicker and more.
I would like to use an event that fires only when the user clicks on an item from the dropdown.
=====
ADMIT EDIT:
Here is a possible way to achieve this now:
<TelerikComboBox @bind-Value=@SelectedValue
Data="@ComboBoxData"
ValueField="ProductId"
TextField="ProductName">
<ItemTemplate>
@{
var currentItem = context as Product;
<div onclick="@(() => OnClickHandler(currentItem))" style="width:100%">
@currentItem.ProductName
</div>
}
</ItemTemplate>
</TelerikComboBox>
@code {
private void OnClickHandler(Product item)
{
//the application logic here
}
public IEnumerable<Product> ComboBoxData { get; set; }
public int SelectedValue { get; set; } = 2;
protected override void OnInitialized()
{
List<Product> products = new List<Product>();
for (int i = 1; i < 10; i++)
{
products.Add(new Product()
{
ProductId = i,
ProductName = $"Product {i}",
UnitPrice = (decimal)(i * 3.14)
});
}
ComboBoxData = products;
base.OnInitialized();
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { get; set; }
}
}
Hi Telerik Team,
One of the requirements for my team project is that the ComboBox needs to be sorted in descending order to list dates. We need to sort the groups and the options inside the groups.
Ideally, the ComboBox can have a SortDirection parameter that defines the order as SortAscending or SortDescending, and can display the ComboBox groups and options accordingly.
===
Admin Edit:
It would be useful if you could disable the default sorting of the groups as well.
Hi
I have an TelerikComboBox for selecting a "site". I use Filterable + FilterOperator (StringFilterOperator.Contains). The "Data" contains almost 2500 sites.
So, my problem is that it is slow when start writing in the combobox. I know for auto-complete you can choose to have a minimum characters before filtering kicks in (MinLength parameter), can you achieve that somehow? Or is it any other way of speeding up the search?
Regards
Emanuel
---
ADMIN EDIT
For the time being, you can see how to achieve that through the OnRead event: https://docs.telerik.com/blazor-ui/knowledge-base/combo-debounce-onread
---
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; }
}
}
Related to https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object
However I'm looking to do this for the Combobox, i.e.
<TelerikComboBox Data="@Users"
@bind-Value="@FormElement.UserInitials"
ValueField="Dto.UserInitials"
TextField="Dto.UserInitials"
>
</TelerikComboBox>
public class Users
{
//bunch of properties
public UserSubProperties Dto {get; set;}
}
public class UserSubProperties
{
public string UserInitials {get; set;}
}