Unplanned
Last Updated: 05 Mar 2024 12:10 by ADMIN

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;
    }
}

 

Unplanned
Last Updated: 07 Jun 2023 18:29 by Dialog
Created by: Dialog
Comments: 0
Category: ComboBox
Type: Feature Request
2

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.

Duplicated
Last Updated: 18 Jan 2023 06:55 by ADMIN

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?

Completed
Last Updated: 06 Dec 2022 09:39 by ADMIN
Release 4.0.0 (18 Jan 2023) (R1 2023)
Created by: Andrew
Comments: 2
Category: ComboBox
Type: Feature Request
29

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.

Duplicated
Last Updated: 25 Oct 2022 22:32 by ADMIN
Created by: Rick
Comments: 1
Category: ComboBox
Type: Feature Request
6

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.

Completed
Last Updated: 26 Jul 2022 08:11 by ADMIN
I am using a Groupable ComboBox and I would like access to the list of the available groups so that I can create a custom group name sort order.
Unplanned
Last Updated: 30 Jun 2022 01:30 by Chris

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; }
    }
}

Unplanned
Last Updated: 24 May 2022 13:45 by ADMIN
Created by: Harrison
Comments: 1
Category: ComboBox
Type: Feature Request
6

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.

Declined
Last Updated: 23 Mar 2022 11:06 by ADMIN
Created by: John af P
Comments: 3
Category: ComboBox
Type: Feature Request
2

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:

CheckBox in Multiselect

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".

Declined
Last Updated: 22 Mar 2022 09:44 by ADMIN
I have bound the ComboBox to a List<int> and when I set the FIlterable parameter to true, I get an application crash. I would like to be able to filter by integers too. 
Duplicated
Last Updated: 11 Nov 2021 21:27 by ADMIN

 

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

 

Completed
Last Updated: 07 May 2021 11:06 by ADMIN
Release 2.24.0
Created by: ben
Comments: 4
Category: ComboBox
Type: Feature Request
25

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 can't set PageSize on the combobox
  • I can't set TotalCount on the combobox
  • Using Telerik.Blazor.ExtensionMethods.ToOdataString throws a NullReferenceException when I try to use it in the ReadItems method with the ComboBoxReadEventArgs args.Reqeuest.ToOdataString()

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!

Declined
Last Updated: 16 Apr 2021 11:50 by ADMIN
Created by: tilt32
Comments: 1
Category: ComboBox
Type: Feature Request
0

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

Unplanned
Last Updated: 05 Apr 2021 15:41 by ADMIN
Created by: Emanuel
Comments: 0
Category: ComboBox
Type: Feature Request
1

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

---

  
Unplanned
Last Updated: 09 Oct 2020 10:36 by ADMIN
Created by: Marco
Comments: 0
Category: ComboBox
Type: Feature Request
3

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; }
    }
}

 

Unplanned
Last Updated: 08 May 2020 08:57 by ADMIN
Created by: ben
Comments: 8
Category: ComboBox
Type: Feature Request
6

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;}

}

Completed
Last Updated: 29 Jan 2020 14:44 by ADMIN
Release 2.7.0
Allow Combobox and DropDownList to be able to be bound to a remote datasource, for example, a REST endpoint.
Completed
Last Updated: 29 Jan 2020 10:22 by ADMIN
Release 2.6.0

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.