Last Updated: 23 Apr 2021 07:43 by ADMIN
Marc Simkin
Created on: 21 Apr 2021 17:49
Category: UI for Blazor
Type: Bug Report
Support attributes are inconsistent

The attributes that the Telerik Input components, FormItem, and FormGroup should all be consistent in the attributes that are supported.  For example, the TelerikSlider component doesn't support an Id property.  The FormGroup component doesn't support a Class property.

If I place the Slider inside a FormItem Template and provide my own label. I can't associate the label with the Slider since there is no Id property.

Also, if I am using a FormGroup to make sure that two input controls are shown horizontally install of vertically, I can't override the gray horizontal rule that shows with the group, especially when I am not providing LabelText.  I don't want to override this at the TelerikForm as I would like the default behavior in specific instances.

The attached screen shot highlights the issue.  Here is the razor component markup.  Note: Replace the custom RecSetSelector component with a dropdownlist.

    var model = ViewModel.Model;

<TelerikForm EditContext="@EditContext"
        <FluentValidationValidator />
        <FormGroup LabelText="Set options">
                    <label class="k-label k-form-label" for="setName">Set Name</label>
                    <TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>
                    <TelerikDateRangePicker @bind-StartValue="@model.StartDate"
            <FormGroup Columns="2">
                        <label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>
                        <TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>
                <FormItem Field="@nameof(model.RequiredRecsToExpire)">
                        <label class="k-label k-form-label">Required Recs to Expire</label>
                        <TelerikSlider @bind-Value="@model.RequiredRecsToExpire"
        <FormGroup LabelText="Initial starting point">
            <FormItem LabelText="existingSets">
                    <label class="k-label k-form-label" for="existingSets">From existing recommendation sets:</label>
                    <RecSetSelector AvailableSets="@ViewModel.AvailableSets"
                                    OnSetSelected="@OnSetSelected" />
                    <label class="k-label k-form-label" for="eanList">From a list of EANs:</label>
                    <TelerikTextArea Id="eanList"
        <FormItem ColSpan="2" Field="@nameof(model.Comment)">
                <TelerikTextArea Id="comment"

        <ValidationSummary />
        <div class="justify-content-end">
            <TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>

1 comment
Marin Bratanov
Posted on: 23 Apr 2021 07:43

Hello Marc,

The FormItem and FormGroup are not input components and it cannot be expected that they will expose the full range of options an input or editor will.

If you have extremely complex forms, I can suggest you use a standard <EditForm> and design your layout as required - this will let you put any HTML, any CSS in any order you require, while still being able to plug our editor components to benefit from their power. The TelerikForm component is designed to let you create the basic scenario easily and quickly, but such automation always comes at a cost - for example, how far you can modify and extend such a feature before having to write things on your own. There are many cases where form layouts are rather straightforward, and our form caters to that, not to highly customized and stylized forms. For those, we offer individual components like validation messages tools and a variety of editors.

To get to the sliders - the Telerik sliders are a more complex HTML structure than a plain <input type="range">. They offer a ton of functionality it does not (like multiple handles, labels, orientation) and this cannot be achieved with a plain input. Therefore, you can't hook a <label> to it, because it is no longer an input. This is also why they don't have an ID - it is usually used for inputs-labels pairing, but that's not possible here.

What we have done is to enable keyboard navigation and tab order so the user can still use it with the keyboard.

So, with that in mind, I must mark this as "Declined" simply because there are technological requirements that make it impossible to have feature and parameter parity between all components we offer.

Lastly, I opened a new feature request on your behalf for a Class on the FormGroup - I think it can add value, and since the request was opened on your behalf, you are already subscribed for notifications. You can find it in this page:

Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: