Provide ability to define icons for input prefix and suffix. Thus, provide mechanism for built-in validation icon as well.

Example image with suffix icons to give you better perspective of the feature.

Like the grouping in the Kendo combo box https://demos.telerik.com/kendo-ui/combobox/grouping

<AdminEdit>

This Feature Request would be an umbrella for implementing items grouping for select components (ComboBox, DropDownList, MultiSelect, and others).

</AdminEdit>

This is kind of hard to explain, so please see the attached Before and After videos.  In these videos, I'm using a brand new .NET 6 console app.

In the Before video, the Telerik UI for Blazor extension is disabled.  After I type `Console` and hit the period, I see intellisense like I expect to.

In the After video, the extension is enabled.  I'm typing the same thing and hitting period, but something interrupts the period keystroke, and it never appears.  Instead, it just closes the intellisense window.

I used a new console app as an example, but it's happening in all projects.  It's also happening with other keys like semicolons, spaces, and tabs.  It's causing a huge amount of typos and making so I often have to hit keystrokes twice in order for them to register.

I tried doing a full reinstall of Visual Studio.  Everything's fine until I install the Telerik extension, then it starts.  If I disable the extension, the issue goes away.

See more details in the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-validate-on-change and if the behavior and solution there do not fit your needs, leave your comments and ideas on how you want this exposed for configuration and what the desired behavior is. Also, make sure to Vote for this enhancement so we can gauge the public interest in it.

Hi,

In most of my projects I use the ObjectGraphDataAnnotationsValidator component for validating complex types; and I also use a lot of your components. I've noticed what I *think* might be a clash between this validator and some of your input components. I've built a simple (and crude) example but I think it demonstrates the problem.


In the example code we have a table with 2 cells - in both cells we have an EditForm and 10 TelerikTextArea components. The first cell's EditForm contains a ObjectGraphDataAnnotationsValidator instance and the 2nd cell doesn't. Hopefully when you try to reproduce you will notice a distinct difference in performance with the performance of the 2nd EditForm being great, while the 1st EditForm is quite laggy and gets worse the more items you add.


I'm wondering if there is a clash here between the ObjectGraphDataAnnotationsValidator and the input components or I'm using them incorrectly?


Thanks
Michael.

@page "/"

<table width="100%">
    <tr>
        <td width="50%">
            <h3>EditForm with ObjectGraphDataAnnotationsValidator</h3>
            <EditForm Model="Items">
                <ObjectGraphDataAnnotationsValidator />
                @foreach (var item in Items)
                {
                    <div style="display: flex">
                        <TelerikTextArea @bind-Value="item.TextValue" />

                        @if (Items.IndexOf(item) == (Items.Count - 1))
                        {
                            <TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
                                Add
                            </TelerikButton>
                        }
                    </div>
                }
            </EditForm>
        </td>
        <td width="50%">
            <h3>EditForm without ObjectGraphDataAnnotationsValidator</h3>
            <EditForm Model="Items">
                @foreach (var item in Items)
                {
                    <div style="display: flex">
                        <TelerikTextArea @bind-Value="item.TextValue" />

                        @if (Items.IndexOf(item) == (Items.Count - 1))
                        {
                            <TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
                                Add
                            </TelerikButton>
                        }
                    </div>
                }
            </EditForm>
        </td>
    </tr>
</table>

@code {
    protected List<DataItem> Items { get; set; }

    protected override void OnInitialized()
    {
        Items = new List<DataItem>();
        for (var i = 1; i <= 10; i++)
        {
            Items.Add(new DataItem { TextValue = $"This is item number {i}." });
        }
    }

    public class DataItem
    {
        public string TextValue { get; set; }
    }
}

If the TextArea component is used within an EditorTemplate of a grid column, edit mode is always closed upon hitting ENTER.  The thing is that I'm using the TextArea to allow the user to input several lines.  Upon Enter the user wants to move to a new line within the TextArea and not to finish the edit mode.

Regards,

René

---

ADMIN EDIT

For the time being I can offer using the popup editing or a custom external edit form (inline or popup).

Another workaround would be to stop the keydown event propagation so the grid/treelist cannot consume it and close the cell:

        <TreeListColumn Field="EmailAddress" Width="220px">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as Employee;
                    <div @onkeydown:stopPropagation="true">
                        <TelerikTextArea @bind-Value="@CurrentlyEditedEmployee.EmailAddress"></TelerikTextArea>
                    </div>
                }
            </EditorTemplate>
        </TreeListColumn>

It is possible that the grid might stop handling Enter when editor templates are present so you can use the events from the custom editor as desired to invoke the save operation. This could happen through the following request: https://feedback.telerik.com/blazor/1493770-ability-to-prevent-multiple-calls-of-async-updatehandler-when-pressing-enter-in-incell-edit-mode. With or without it, it is highly likely that the approach of preventing the event propagation is the correct one because the grid cannot know what the editor template contains and handle events differently based on that.

---

The Theme Builder contains a really nice looking Popover control, and I was a bit disappointed to discover that this doesn't seem to be documented or supported in UI for Blazor.

I realize I can probably use the Tooltip to achieve a similar effect, with two caveats:

1. Tooltip requires of substantial CSS hacking to appear as the Popover control.
2. The Popover closes on an explicit event, whereas Tooltip closes when it loses focus.

Is there any chance a Popover control is planned for a future release?

In many cases users need to be able to specify a number which is easily visualized using a horizontal slider.
This allows the user to easily move the point to their desired location.

It can be helpful to allow this to also be constrained using a forced range selection.

I couldn't find a way to change the default AnimationDuration of the combobox's popup. Personally, I find the default AnimationDuration set at 300ms way too high.

I'd like a way to change it either per-component, by setting animation properties on them when appropriate, or globally, by configuring it in Startup.cs or on TelerikRootComponent perhaps. I've no idea how this should work.

---

ADMIN EDIT

Here is a way to change the animation of the dropdown per component - through the PopupClass (note that the popup class may move to the topmost element of the popup in a future version, if this stops working, inspect the rendering to see where the custom class is and how to cascade through it):

<style>
    .fast-animation.k-popup.k-reset {
        transition-duration: 100ms !important;
    }

    .slow-animation.k-popup.k-reset {
        transition-duration: 1000ms !important;
    }

    .no-animation.k-popup.k-reset {
        transition: none !important;
    }
</style>



<TelerikComboBox PopupClass="fast-animation"
                 Data="@myComboData"
                 TextField="MyTextField"
                 ValueField="MyValueField"
                 @bind-Value="selectedValue"
                 Placeholder="Fast animation"
                 ClearButton="true" Filterable="true">
</TelerikComboBox>

<TelerikDropDownList PopupClass="no-animation"
                     Data="@myComboData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="selectedValue"
                     DefaultText="No Animation">
</TelerikDropDownList>

<TelerikDatePicker PopupClass="slow-animation" @bind-Value="@SelectedDate"></TelerikDatePicker>

@code {

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
    DateTime SelectedDate { get; set; } = DateTime.Now;
    int selectedValue { get; set; } 
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

It seems like Blazor on the server-side will be re-branded as Razor Components. Will Telerik support it?