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"
Columns="2"
ColumnSpacing="20px"
Orientation="FormOrientation.Vertical"
OnValidSubmit="OnValidSubmit">
<FormValidation>
<FluentValidationValidator />
</FormValidation>
<FormItems>
<FormGroup LabelText="Set options">
<FormItem>
<Template>
<label class="k-label k-form-label" for="setName">Set Name</label>
<TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>
</Template>
</FormItem>
<FormItem>
<Template>
<TelerikDateRangePicker @bind-StartValue="@model.StartDate"
@bind-EndValue="@model.EndDate"
Min="@ViewModel.MinStartDate"
StartId="startDate"
EndId="endDate"
DisabledDates="@ViewModel.DisabledDates">
</TelerikDateRangePicker>
</Template>
</FormItem>
<FormGroup Columns="2">
<FormItem>
<Template>
<label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>
<TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>
</Template>
</FormItem>
<FormItem Field="@nameof(model.RequiredRecsToExpire)">
<Template>
<label class="k-label k-form-label">Required Recs to Expire</label>
<TelerikSlider @bind-Value="@model.RequiredRecsToExpire"
Min="0"
Max="20"
SmallStep="1"
LargeStep="5"
ShowButtons="false"/>
</Template>
</FormItem>
</FormGroup>
</FormGroup>
<FormGroup LabelText="Initial starting point">
<FormItem LabelText="existingSets">
<Template>
<label class="k-label k-form-label" for="existingSets">From existing recommendation sets:</label>
<RecSetSelector AvailableSets="@ViewModel.AvailableSets"
IsNew="true"
SelectedSetId="@ViewModel.SelectedSetId"
OnSetSelected="@OnSetSelected" />
</Template>
</FormItem>
<FormItem>
<Template>
<label class="k-label k-form-label" for="eanList">From a list of EANs:</label>
<TelerikTextArea Id="eanList"
@bind-Value="@ViewModel.EanList"
AutoSize="true">
</TelerikTextArea>
</Template>
</FormItem>
</FormGroup>
<FormItem ColSpan="2" Field="@nameof(model.Comment)">
<Template>
<TelerikTextArea Id="comment"
@bind-Value="@model.Comment"
AutoSize="true">
</TelerikTextArea>
</Template>
</FormItem>
<ValidationSummary />
</FormItems>
<FormButtons>
<div class="justify-content-end">
<TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>
<TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>
</div>
</FormButtons>
</TelerikForm>