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;
}
}
}
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.
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.
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);
}
}
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 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 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.
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.
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; }
}
}
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".
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
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!
Hello everyone,
in the web app we are programming, we make heavy use of the TelerikCombobox. Now the use case arises, that the user needs to be able to select a numeric value (double or int, mainly) out of an existing list of values, or if the needed value does not exist yet, provide a custom value.
In this particular case, he selects out of a range of existing article lengths or widths. Most of the time, the length or width is of a "normed" width or length (meaning the normal width / length the article would have) Since they can however produce an article in any width / length they wish to, it does happen sometimes, that the range of existing article widths / lengths is missing the desired value. Hence we thought we could make use of the AllowCustom feature of the TelerikCombobox, so that the user can provide a value themselfes, if need be.
However, the type restriction to string of the Value and Text-Field of the Items makes it rather cumbersome todo so, as a new Model class is needed which has the Text / Value fields as string and internally maps it to the desired type. In addition the user can provide input, which does not make any sense whatsoever for the underlying type.
Would it be possible, for the AllowCustom feature to work also mit numeric values? I.e. When the property the Value-field is referencing to, returns a numeric value, only numeric input is considered (somewhat similar to the NumericTextBox)?
Best Regards,
tilt32
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;}
}