Declined
Last Updated: 12 Mar 2024 06:58 by ADMIN
Created by: Kristjan
Comments: 2
Category: AutoComplete
Type: Feature Request
1

When trying to use autocomplete, it falls short of what I would like to have. I presumed this to be on feature parity with MudBlazor offerings.

What I used before with mudautocomplete: label, value, style, reset value on empty text, coerce text, to string func, search func, required, required error, value changed, virtualize, max items. The way I use autocomplete box, is that user searches against a list of hundreds of thousands of elements, component querys against method, get's filtered reply that is displayed. When chosen, it binds the guid value, not the string. User also cannot submit their own option, only one from provided list. 

Telerik autocomplete box does not provide those features, what other workarounds are there besides running with Mudblazor for time being?

Completed
Last Updated: 07 Nov 2023 14:32 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
Created by: Chris
Comments: 0
Category: AutoComplete
Type: Bug Report
1

There is a JavaScript error in telerik-blazor.js when using browser autofill with the AutoComplete and the ComboBox:

Cannot read properties of undefined (reading 'length')

A possible workaround is to use a TextBox or a DropDownList.

Here is a test page:

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@Employee" Width="300px">
    <FormItems>
        <FormItem>
            <Template>
                <label>
                    First Name
                    <TelerikTextBox AutoComplete="given-name" @bind-Value="@Employee.FirstName" />
                </label>
            </Template>
        </FormItem>
        <FormItem>
            <Template>
                <label>
                    Last Name
                    <TelerikTextBox AutoComplete="family-name" @bind-Value="@Employee.LastName" />
                </label>
            </Template>
        </FormItem>
        <FormItem>
            <Template>
                <label class="k-label k-form-label">State*</label>
                <TelerikAutoComplete Data="@StateList"
                                     ValueField="@nameof(DropDownListModel.DataText)"
                                     @bind-Value="@Employee.StateName"
                                     Placeholder="Enter a State, e.g., Alabama"
                                     OnChange="OnStateSelected">
                </TelerikAutoComplete>
                @*<TelerikDropDownList Data="@StateList"
                                         TextField="@nameof(DropDownListModel.DataText)"
                                         ValueField="@nameof(DropDownListModel.DataText)"
                                         @bind-Value="@Employee.StateName"
                                         DefaultText="Enter a State, e.g., Alabama"
                                         OnChange="OnStateSelected">
                    </TelerikDropDownList>*@
                <TelerikValidationMessage For="@(() => Employee.StateName)"></TelerikValidationMessage>
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>

@code {
    Person Employee { get; set; } = new Person();

    List<DropDownListModel> StateList { get; set; } = new List<DropDownListModel>() {
        new DropDownListModel() { DataText = "Alabama" },
        new DropDownListModel() { DataText = "Alaska" },
        new DropDownListModel() { DataText = "Texas" },
        new DropDownListModel() { DataText = "New York" },
        new DropDownListModel() { DataText = "Washington" },
        new DropDownListModel() { DataText = "California" },
        new DropDownListModel() { DataText = "Florida" }
    };

    void OnStateSelected(object newValue)
    {
    }

    public class Person
    {
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string StateName { get; set; }
    }

    public class DropDownListModel
    {
        public string DataText { get; set; }
    }
}

 

Unplanned
Last Updated: 03 Jan 2023 09:18 by Chris
I have added a collection of 170 000 items to the Data parameter of the AutoComplete component. When I type in the input, the filtering takes a long time to display the correct records. 
Completed
Last Updated: 12 Apr 2022 18:12 by ADMIN
Release 3.2.0

The inputs now have DebounceDelay property but it will be useful to also have such functionality for other components that incorporate inputs - AutoComplete, for example.

I am loading data from the server based on the input that the user does. As it is not possible to predict how long the server takes to answer, it would be useful to only change the value after the user stops editing for about certain milliseconds.

Declined
Last Updated: 23 Feb 2022 14:04 by ADMIN
Hello, 
I'm using the autocomplete control to bind a comlex model to it.
Binding a complex model is currently supported by the autocomplete control:
https://docs.telerik.com/blazor-ui/components/autocomplete/data-bind#bind-to-a-model
When selecting an item from this list, it is necessary to retreive the selected item.
It seems to me that at the moment the .ToString Method is called on the selected item. 
That results in displaying type information at the UI and providing the type information when the "MyOnChangeHandler" function ist called ( 02.jpg, 03.jpg).
And because the OnChange event handler needs to implement a function with an object as a parameter ( 03.jpg ) I'm wondering how the selected item can retreived.
Instead ob providing a .ToString() - information when binding to a complex type you need to provide the selected item.

And by the way, when selecting an item the ItemTemplate ( 04.jpg ) seems to be ignored when displaying this selected item.
Completed
Last Updated: 07 Jan 2022 10:29 by ADMIN
Release 3.0.0

Please remove the hardcoded width and make default width 100% as in the other components.

---

ADMIN EDIT

I updated the title to be more generic - it should be about removing the inline width rule, and whether there will be a default value and what units it will use will be up to a more detailed research.

---

Unplanned
Last Updated: 15 Dec 2021 19:55 by ADMIN

I want to implement throttle in the AutoComplete, for example. Basically when user types, I want to throttle for 1 second and after that whatever text is typed I want that to be searched.

===

Admin edit: Here is a KB article, which describes how to achieve this:

Debounce filter requests and apply minimum search string length

Duplicated
Last Updated: 09 Apr 2021 14:42 by René

Since 2.23.0 there is something wrong with the z-index of the TelerikComboBox.

If a TelerikComboBox is used on a TelerikWindow, starting to type opens the dropdown behind the window and thus cannot be seen.

Clicking on the Dropdown Button of the ComboBox, the dropdown is opened and displayed correctly and after clicking on the Dropdown Button once, typing in the text field also displays the dropdown correctly.

It really bothers my users though that they cannot start typing right away so I had to revert to version 2.22.0 which does not have this error.

Note: Since I figured it's some kind of styling problem, I rebuild our custom theme using the ThemeBuilder but the error was still there after that.

Unplanned
Last Updated: 17 Aug 2020 14:42 by ADMIN

When using AutoComplete on Mobile devices, the onscreen keyboard pops up, and will mask the drop down list from the AutoComplete component.  Yes, the Height of the dropdown list is controllable (px, em, etc.), but this is problematic with varying display sizes.  For example, I was able to show a list of 6 lines on my phone, but when I demoed the App to the Chief Development Officer, his phone was older, smaller, and when the keyboard popped up, only 4 lines were visible!  So embarrassing.

What I want to propose is to extend the AutoComplete component with a new Control called PopUpLines, where the MAX number of lines that can be displayed is set.  In my example, I would set this value to 4 to make sure it works on the CDO's phone.  However, the AutoComplete control would need to know what the screen size is, calculate how big a line is, and how many lines can be displayed without the on-screen keyboard masking the list.  It would then display from 1 to PopULines worth of lines in the drop down box.  This would insure that a on-screen keyboard never masks the AutoComplete list, destroying UI functionality.

Unplanned
Last Updated: 31 Jan 2020 10:25 by ADMIN
Created by: Brian
Comments: 1
Category: AutoComplete
Type: Feature Request
2

When typing in the AutoComplete component, it defaults to the last visible line in the drop down list, if the item is greater than the window size.  On mobile devices, this has a negative effect that the on-screen keyboard will mask the typed in entry if the list is too long.  If the height of the dropdown list is accurate, it is not masked, but it is still at the bottom of the list.  If you type a query into Google, the highlight item as at the top of the list, not the bottom.

1) I propose to change the default functionality of AutoComplete to display the closest match at the top of the dropdown box, not at the bottom.

2) I propose to add a new new control DefaultDisplayPosition=[First|Middle|Last] to give developers control over the UI experience.

To be clearer, you have a list that of X items.  The AutoComplete window can display Y items.  X can be >, < or = to Y.  If X[selected] is < Y, it will be highlighted anywhere between Y[First] through Y[Last].  However, if it is >= Y[Last], then the highlighted selection is always the last item in the dropdown display.  There should be an option to set the highlighted item to Y[First], Y[Middle], or Y[Last], maybe even Y[N] (not so sure about that).  Again with all kinds of different mobile screen sizes, with the current default being Y[last], it can easily be hidden by the on screen keyboard.