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.
=====
TELERIK EDIT / TLDR
The desired behavior violates accessibility standards. That's why we will refrain from implementing it as a built-in feature. We suggest the following workaround that is now part of the documentation: Select focused ComboBox item on tab
I would like to change the text in the ComboBox dropdown when there is no data in the source collection.
At the moment the only option is through localization for all instances like here.
Transitioning our application from Telerik React to Blazor, our comboboxes in our React application are hooked up to OData endpoints because of the amount of data they could display, some as large as 30mb of json.
Server filtering, https://feedback.telerik.com/blazor/1447481-server-filtering-with-custom-data-request-event-that-can-accommodate-remote-data, almost works, however:
I tried setting up my combobox like my OData Grid, i.e.
<TelerikComboBox Data="@Dtos"
OnRead="@ReadItems"
Filterable="true"
Placeholder="Find what you seek by typing"
@bind-Value="@SelectedValue"
TextField="Name"
ValueField="Id"
Pageable="true"
PageSize="20"
TotalCount=@Dtos.Count
>
However it throws an exception:
blazor.webassembly.js:1 WASM: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikComboBox`2[[MyType, MyNamespace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[System.Guid, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Pageable'.
Was hoping this would 'just work' like it does with the Grid, which is amazing!
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;}
}
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.
We are needing a way to display a hierarchy inside the ComboBox. I don't see any examples on this particular feature, I had found a similar request, but not identical.
Our use case:
We have administrators that manage multiple tenants within our system. The tenants are part of a hierarchy, the user needs to be able to select a tenant or tenant parent.
I will use hotels as an example:
-Chain 1
--Brand 1
---Property 1
---Property 2
--Brand 2
---Property 3
Our current system that we are migrating controls from has this feature, so I would like to stick as close to this functionality as possible, however; if it is not an option, what control would you suggest as an alternative.
See example (sorry for the redactions)
The core concept is providing a user a choice as part of a form, but layout needs to be organized so that a user can easily navigate. Top level names are unique, all other names can duplicate since they may share similar naming conventions across different organizations.
An option that may work as an alternative, is invoking a dialog popup and within it having a tree list of the information I need. I think it could work, but it would certainly break the flow of the form.
When using the OnRead event of the ComboBox there is no way to retrieve the selectedItem because the list of items that is populated is internal.
There are 2 workaround but they are not ideal:
- Saving the list of items returned by the OnRead event into a parallel list and then retrieve the selectedItem from it -> the problem is that there will be 2 identical lists in memory and, if scaled, might cause problems:
CachedSitesList = result.Items;
args.Data = result.Items;
args.Total = (int)result.TotalCount;
- Retrieving the selectedItem by calling the DB using the Id of the item -> the problem is that it's one more request to add to the DB and the performance is going to decrease if scaled, also it seems useless as the item is already present in memory.
We suggest adding a function to return the selectedItem to improve performance and scalability of the component.
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; }
}
}
When i search for something by typing in combobox, i want to be able to use the keyboard to make my selection
Exable below, if i press b, I want to be able to either select baseboll by pressing enter, or make another selection by using arrow keys and then enter.
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; }
}
}
Thanks for adding more new controls to Blazor. That help us to move to it from ASPX AJAX.
Can we have the Multi-Column ComboBox, like the ASPX AJAX that one, please?
https://www.telerik.com/products/aspnet-ajax/ajax-multicolumncombobox.aspx
Please add a way to add, if it is missing in the item list, and set the selected item of a combobox programmatically. This will spare the need to call the remote source and have duplicate data.
Example: if you choose a city from a combobox and the city has all the information about the province, the province combobox should populate with the correct data without needing to call the remote source.
An Implementation of this could be:
public void SetSelectedItem(TItem item)
{
if (item == null)
{
ClearButtonClick();
}
else
{
ListDataItem clonedItem = CreateDataItem(item.Clone());
var dataItemToSelect = DataItems.FirstOrDefault(x => x.Value.Equals(clonedItem.Value));
if (dataItemToSelect == null)
{
dataItemToSelect = clonedItem;
AddCustomValue(dataItemToSelect.Text, dataItemToSelect.Value, dataItemToSelect.DataItem);
}
SelectItem(dataItemToSelect);
}
}
Hello, I would like to have a mutiselect dropdown like you have for ajax:
https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx
Syncfusion and radzen have this support for blazor :
https://blazor.syncfusion.com/demos/multiselect-dropdown/checkbox?theme=bootstrap5
https://blazor.radzen.com/dropdown
I know that you have a proposed solution for the MultiSelect component:
But the design of this one is not what I'm after, the box still expands downwards when selecting multiple items and it makes it hard to design a coherent page that does not make the dom "jump around". Also the implementation is cumbersome for more complex objects .
It would be better with a solution like you have for ajax where it just shows the first items that fits and then "+X items".
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.
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
---
I would like the ability to flag elements in a data bound combo that are no longer available as disabled and not selectable. Had they been previously selected, they still need to show, but should not allow a user to select it again.
I would like a property that can be set when databinding a combo.
For instance when you set the Data, TextField, & ValueField properties, can there also be one for SelectableField (or something) - this could be mapped to a Boolean in the dataset.
If this property isn't used then it defaults to yes (ie they are all selectable), but if it is used, then any items which have this field set to 'no' then they show as a different color (could just be grey) but are not selectable by the user.
If they had previously been selected (prior to being marked as no longer available) then they should show when the record is loaded, but otherwise they are not selectable.
I don't particularly want to write code on click to see if its enabled and then unselect it, I would prefer it to simply be built into the base control.
Is this possible? Or is there another property already there that does this?
I want to access runtime the value by which the user filters.
===ADMIN EDIT===
Use the OnRead event handler to access the filter value:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikComboBox OnRead="@OnComboBoxRead"
TItem="@ListItem"
TValue="@int"
@bind-Value="@SelectedValue"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Id)"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
Width="300px">
<ItemTemplate>
@HighlightResult(context.Text)
</ItemTemplate>
</TelerikComboBox>
<style>
.k-list-item:has(u) {
gap: 0;
}
</style>
@code {
private List<ListItem> ListItems { get; set; } = new();
private int SelectedValue { get; set; } = 3;
private string ComboBoxFilterValue { get; set; } = string.Empty;
private async Task OnComboBoxRead(ComboBoxReadEventArgs args)
{
ComboBoxFilterValue = args.Request.Filters.Cast<FilterDescriptor>().FirstOrDefault()?.Value.ToString() ?? string.Empty;
DataSourceResult result = await ListItems.ToDataSourceResultAsync(args.Request);
args.Data = result.Data;
args.Total = result.Total;
}
public MarkupString HighlightResult(string text)
{
var result = string.IsNullOrWhiteSpace(ComboBoxFilterValue)
? text
: text.Replace(ComboBoxFilterValue, "<u>" + ComboBoxFilterValue + "</u>", StringComparison.OrdinalIgnoreCase);
return new MarkupString(result);
}
protected override void OnInitialized()
{
ListItems = new List<ListItem>() {
new ListItem(1, "Basketball"),
new ListItem(2, "Golf"),
new ListItem(3, "Baseball"),
new ListItem(4, "Table Tennis"),
new ListItem(5, "Volleyball"),
new ListItem(6, "Football"),
new ListItem(7, "Boxing"),
new ListItem(8, "Badminton"),
new ListItem(9, "Cycling"),
new ListItem(10, "Gymnastics"),
new ListItem(11, "Swimming"),
new ListItem(12, "Wrestling"),
new ListItem(13, "Snooker"),
new ListItem(14, "Skiing"),
new ListItem(15, "Handball"),
};
base.OnInitialized();
}
public class ListItem
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
public ListItem(int id, string text)
{
Id = id;
Text = text;
}
}
}