We have had major complaints from users when using the combo box. They use the filter, see the first item highlighted, then click tab and the item in not selected. They do a lot of data entry and don't want to use the mouse or use the down arrow to select it. They are used to a regular HTML select control which works that way. Is there any Javascript workaround for this? If not, I probably have to go back to using a standard select box. The reason I am using the combobox and not the dropdown is because your dropdown doesn't support tabbing out of the box and that was a deal breaker for them.
I saw an article on using the PopupClass for the ComboBox but that isn't a supported property.
Thanks!
This took me a minute to figure out. I figure I would pass it on.
For those of you looking to do this in a grid component. Don't use the OnBlur event on the combobox. Put the Test() code in the OnUpdate event for the grid component. Like below.
private async Task OnUpdateEventHandler(GridCommandEventArgs args)
{
var context = (YourModel)args.Item;
var record = YourGridList.FirstOrDefault(x => x.id == context.id);
if (record != null)
{
switch (args.Field)
{
case nameof(YourModel.ColumnName):
{
string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
Console.WriteLine("--------------");
Console.WriteLine(currInput);
Console.WriteLine("--------------");
// note - this relies on the item template of the combo rendering the text, or not being used at all
// if you use other item templates, you may need to delve deeper in the DOM or otherwise recognize the item
if (!string.IsNullOrEmpty(currInput))
{
// match the filter operation to the filter operator of the combo box - Contains in this sample
var matchingItem = YourComboboxList.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
if (matchingItem != null)
{
record.Value = matchingItem.MyValueField;
}
}
break;
}
}
}
}
Hi James,
Regarding the desired functionality, we already have a public item: Automatically select first item on losing focus when the dropdown is open. It is a valid feature that is currently missing.
That said, I'm marking this item as a "Duplicate" of the one in the above link.
In the meantime, here is a workaround without the PopupClass (for newer versions) you can use:
@inject IJSRuntime _js
@* Move this script to a proper place in your project, the suppress-error hack is to keep it here in the component for easy copy-paste *@
<script suppress-error="BL9992">
function getComboHighligtedItem() {
// gets the currently focused item in this particular combobox
var selItemElem = document.querySelector(".special-combobox .k-focus");
if (selItemElem) {
return selItemElem.innerText;
}
}
</script>
Selected value: @selectedValue
<br />
<TelerikComboBox OnBlur="@Test"
Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue"
Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">
<ComboBoxSettings>
<ComboBoxPopupSettings Class="special-combobox" />
</ComboBoxSettings>
</TelerikComboBox>
<input placeholder="other form elements" />
@code {
async Task Test()
{
string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
Console.WriteLine("--------------");
Console.WriteLine(currInput);
Console.WriteLine("--------------");
// note - this relies on the item template of the combo rendering the text, or not being used at all
// if you use other item templates, you may need to delve deeper in the DOM or otherwise recognize the item
if (!string.IsNullOrEmpty(currInput))
{
// match the filter operation to the filter operator of the combo box - Contains in this sample
var matchingItem = myComboData.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
if (matchingItem != null)
{
selectedValue = matchingItem.MyValueField;
}
}
}
// just dummy data follows
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; }
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
Let me know if I'm missing something or if you find difficulties with the above code.
Regards,
Hristian Stefanov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
PopupClass