Planned
Last Updated: 19 Sep 2021 14:21 by ADMIN
Scheduled for 3.0.0
Created by: Andrew
Comments: 2
Category: ComboBox
Type: Feature Request
16

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.

Unplanned
Last Updated: 10 May 2021 07:28 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:

 

@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-item.k-state-focused");
        if (selItemElem) {
            return selItemElem.innerText;
        }
    }
</script>

Selected value: @selectedValue
<br />

<TelerikComboBox OnBlur="@Test" PopupClass="special-combobox"
                 
                 Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue" 
                    Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">
</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; }
    }
}

 

---

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
1

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
4

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.