or
1 answer
23 views
Hi,
I'm currently using a TelerikForm with built-in validation and TelerikTabStrip to split the form into multiple tabs. I’m using a single shared EditContext for the entire form, covering fields across all tabs.
The issue I'm facing:
When I trigger form validation (e.g. by clicking Submit), only the fields in the currently visible tab get proper validation UI (.k-invalid, red borders, etc.). Fields in tabs not yet visited do not show red borders around input fields — only the validation summary displays the error messages (and labels are red for those fields which is ok).
You can observe this issue directly in your own official demos:
Demo
Once I manually visit each tab, the fields inside do react to validation as expected (input fields appear with red borders). But still - all of it works only with PersistTabContent parameter set to true (meaning behaviour when user visits some tabs, clicks submit elsewhere and gets back to tabs already visited.) without PersistTabContent checked - it doesn't work at all.
This behavior leads to a confusing and inconsistent UX, especially in forms that do not have visible labels next to each field — users don’t realize what’s wrong until they manually visit every tab.
My questions:
-Is there any workaround to make validation styles apply to inputs in all tabs, even those not yet rendered without need to manually render all the tabs content?
-Is there a planned feature or improvement to address this?
If not, I’d like to formally request this as must-have functionality.
As it stands now, this issue severely degrades the user experience. Validation messages show in the summary, but without any visual feedback in the inputs — especially in unvisited tabs — users are left confused.
In practical terms, tabs become unusable for serious forms when this happens. If users have to manually check every tab just to find the highlighted fields, it defeats the purpose of having tabs in the first place.
Thanks for any help!
-Bohdan
I'm currently using a TelerikForm with built-in validation and TelerikTabStrip to split the form into multiple tabs. I’m using a single shared EditContext for the entire form, covering fields across all tabs.
The issue I'm facing:
When I trigger form validation (e.g. by clicking Submit), only the fields in the currently visible tab get proper validation UI (.k-invalid, red borders, etc.). Fields in tabs not yet visited do not show red borders around input fields — only the validation summary displays the error messages (and labels are red for those fields which is ok).
You can observe this issue directly in your own official demos:
Demo
Once I manually visit each tab, the fields inside do react to validation as expected (input fields appear with red borders). But still - all of it works only with PersistTabContent parameter set to true (meaning behaviour when user visits some tabs, clicks submit elsewhere and gets back to tabs already visited.) without PersistTabContent checked - it doesn't work at all.
This behavior leads to a confusing and inconsistent UX, especially in forms that do not have visible labels next to each field — users don’t realize what’s wrong until they manually visit every tab.
My questions:
-Is there any workaround to make validation styles apply to inputs in all tabs, even those not yet rendered without need to manually render all the tabs content?
-Is there a planned feature or improvement to address this?
If not, I’d like to formally request this as must-have functionality.
As it stands now, this issue severely degrades the user experience. Validation messages show in the summary, but without any visual feedback in the inputs — especially in unvisited tabs — users are left confused.
In practical terms, tabs become unusable for serious forms when this happens. If users have to manually check every tab just to find the highlighted fields, it defeats the purpose of having tabs in the first place.
Thanks for any help!
-Bohdan
Hristian Stefanov
Telerik team
answered
on
11 Jun 2025
1 answer
23 views
Hello Telerik Team,
I'm building advanced forms using <TelerikForm> and <FormItem> components. My use case includes complex grid layouts (4+ columns), dynamic label/input structures, and the ability to switch orientations (horizontal ↔ vertical) depending on the layout.
The problem I face is related to label positioning and flexibility. Since labels are tightly bound to inputs inside <FormItem>, it's hard to restructure the layout dynamically or follow modern design principles where labels float, stack, or separate cleanly from inputs.
Additionally, because <FormItem> doesn’t offer properties like LabelCssClass or FieldCssClass, I’m forced to use <Template> for nearly every form element. And in large forms (50+ fields), that creates a huge boilerplate mess.
Here's a code example of how I currently break label/input pairing just to achieve layout control:
Some notes about the limitations:
-I cannot use RenderFragment loops with a shared template to render controls dynamically — because I lose the ability to manage each control’s UI and behavior precisely.
-Using @refs to manage these dynamic elements becomes a nightmare — they don't give me flexible access to the rendered markup/UI, and the logic becomes very hard to maintain.
-So to preserve clean control over layout and per-control behavior, I'm forced to manually write each <FormItem> and control in a verbose way — which feels like overkill.
In aim to have less boilerplate UI and code, but still have an ability to change layout structure in real time - my questions are:
-Can we request a feature to separate labels from inputs, but still associate them logically (e.g., via an Id, or LabelFor property)?
-Is there any plan or recommendation to make <TelerikForm> more flexible — for instance, to allow label placement (above/beside) or wrapping via a simple layout option?
-Are there any workarounds/best practices for advanced layouts with full control over label/input rendering, while preserving strong typing and validation?
But the main aim is to have an opportunity to have Labels aligned by left and have "space between" input and label,
Maybe there is some easy approach with overriding some of your classes like k-input or k-label or k-form-label etc...?
I’d really appreciate your insights.
Thanks for your time and help!
Best regards,
Bohdan (Blazor Developer)
I'm building advanced forms using <TelerikForm> and <FormItem> components. My use case includes complex grid layouts (4+ columns), dynamic label/input structures, and the ability to switch orientations (horizontal ↔ vertical) depending on the layout.
The problem I face is related to label positioning and flexibility. Since labels are tightly bound to inputs inside <FormItem>, it's hard to restructure the layout dynamically or follow modern design principles where labels float, stack, or separate cleanly from inputs.
Additionally, because <FormItem> doesn’t offer properties like LabelCssClass or FieldCssClass, I’m forced to use <Template> for nearly every form element. And in large forms (50+ fields), that creates a huge boilerplate mess.
Here's a code example of how I currently break label/input pairing just to achieve layout control:
<FormItem Field="Number1" ColSpan="2">
<Template>
<label for="Number" class="k-label k-form-label">
@Localizer["Form_JednAdminView_Number"]:
</label>
</Template>
</FormItem>
<FormItem Field="Number1" ColSpan="1">
<Template>
<TelerikNumericTextBox Id="Number1" Value="@DataContext.FormData.Number1" ValueExpression="@(() => DataContext.FormData.Number1)" ReadOnly="true" />
<TelerikValidationTooltip For="@(() => DataContext.FormData.Number1)" TargetSelector="#Number1" />
</Template>
</FormItem>
<FormItem Field="Number2" ColSpan="1">
<Template>
<TelerikTextBox Id="Number2" Value="@DataContext.FormData.Number2" ValueExpression="@(() => DataContext.FormData.Number2)" ReadOnly="true" />
<TelerikValidationTooltip For="@(() => DataContext.FormData.Number2)" TargetSelector="#Number2" />
</Template>
</FormItem>
@GetEmptyFormItem(4)-I cannot use RenderFragment loops with a shared template to render controls dynamically — because I lose the ability to manage each control’s UI and behavior precisely.
-Using @refs to manage these dynamic elements becomes a nightmare — they don't give me flexible access to the rendered markup/UI, and the logic becomes very hard to maintain.
-So to preserve clean control over layout and per-control behavior, I'm forced to manually write each <FormItem> and control in a verbose way — which feels like overkill.
In aim to have less boilerplate UI and code, but still have an ability to change layout structure in real time - my questions are:
-Can we request a feature to separate labels from inputs, but still associate them logically (e.g., via an Id, or LabelFor property)?
-Is there any plan or recommendation to make <TelerikForm> more flexible — for instance, to allow label placement (above/beside) or wrapping via a simple layout option?
-Are there any workarounds/best practices for advanced layouts with full control over label/input rendering, while preserving strong typing and validation?
But the main aim is to have an opportunity to have Labels aligned by left and have "space between" input and label,
Maybe there is some easy approach with overriding some of your classes like k-input or k-label or k-form-label etc...?
I’d really appreciate your insights.
Thanks for your time and help!
Best regards,
Bohdan (Blazor Developer)
Dimo
Telerik team
answered
on
03 Jun 2025
0 answers
40 views
Hello all,
I am getting the following error upon running deployed blazor app on IIS. When running it from local VS 2022 there are no issues.
<TelerikForm Columns="3" ColumnSpacing="35px" Model="@FormModel">
<FormItems>
<!-- Dropdown 1 -->
<FormItem>
<Template>
<div>Dropdown 1</div>
<TelerikComboBox Width="350px" Data="@Dropdown1Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown1Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>
<!-- Text Field 1 -->
<FormItem>
<Template>
<div>Text Field 1</div>
<TelerikTextBox Width="350px" @bind-Value="@FormModel.TextField1" />
</Template>
</FormItem>
<!-- Text Field 2 -->
<FormItem>
<Template>
<div>Text Field 2</div>
<TelerikTextBox Width="350px" @bind-Value="@FormModel.TextField2" />
</Template>
</FormItem>
<!-- Dropdown 2 -->
<FormItem>
<Template>
<div>Dropdown 2</div>
<TelerikComboBox Width="350px" Data="@Dropdown2Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown2Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>
<!-- Dropdown 3 -->
<FormItem ColSpan="2">
<Template>
<div>Dropdown 3</div>
<TelerikComboBox Width="350px" Data="@Dropdown3Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown3Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>
<!-- Dropdown 4 -->
<FormItem>
<Template>
<div>Dropdown 4</div>
<TelerikComboBox Width="350px" Data="@Dropdown4Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown4Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>
<!-- Dropdown 5 -->
<FormItem>
<Template>
<div>Dropdown 5</div>
<TelerikComboBox Width="350px" Data="@Dropdown5Options" TextField="Text" ValueField="Value"
@bind-Value="@FormModel.Dropdown5Value"
ShowClearButton="true" Filterable="true" Placeholder="Select">
</TelerikComboBox>
</Template>
</FormItem>
<!-- Dropdown 6 -->
<FormItem>
<Template>
<div>Dropdown 6
2 answers
61 views
I have a form that has a single editable field. When that field has a value put into it there is a method that validates the value and fills in the rest of the fields based on the value. That method then should also trigger a submit. I do not want the UI portion of the form to change or respond with a confirmation. I do need the record Id that is created when the form is submitted.
So basically
Put a value into a field.
Fill out the rest of the form automatically based on the above value & submit the form data to my DB and return a record Id.
That retrieved Id is then fed to another component that resides in a window control on the original form component.
Ideally there would be way to use a form ref to submit the form... i.e. myFormRef.Submit()
1 answer
33 views
Currently I am using a Telerikform which has a FormItem. This FormItem is a Dropdownlist using templates.
The Form has an OnUpdate event I am listening to and the Dropdownlist has a ValueChanged event.
If I select an Item in the Dropdownlist the OnUpdate of the Form get triggered befire the ValueChanged on the DropDownlist.
Is this intended behaviour, if yes, how can I change the order?
0 answers
42 views
<TelerikForm EditContext="EditContext" OnValidSubmit="Save" Columns="3" ColumnSpacing="15px">
<FormValidation>
<FluentValidationValidator />
</FormValidation>
<FormItems>
<FormItem Id="fiInvoiceFooterElemenName" ColSpan="2">
<Template>
<label class="k-label k-form-label" for="ddlInvoiceFooterElement">@Resources.InvoiceFooterElementName</label>
<TelerikDropDownList Id="ddlInvoiceFooterElementName"
TItem="@InvoiceFooterElementCategory"
TValue="@Guid"
TextField="@nameof(InvoiceFooterElementCategory.FullName)"
ValueField="@nameof(InvoiceFooterElementCategory.InvoiceFooterElementCategoryId)"
Data="@invoiceFooterElementCategories"
@bind-Value="@invoiceFooterElementLine.InvoiceFooterElementCategoryId"
OnChange="OnChangeInvoiceFooterElementCategories"
Width="100%"
DefaultText="@Resources.SelectInvoiceFooterElementCategory">
<DropDownListSettings>
<DropDownListPopupSettings Height="auto" MaxHeight="250px" Width="auto" />
</DropDownListSettings>
@* <ItemTemplate>
<span>@($"{context.Name} ({context.Code})")</span>
</ItemTemplate> *@
</TelerikDropDownList>
<ValidationMessage For="@(() => invoiceFooterElementLine.InvoiceFooterElementCategoryId)" />
</Template>
</FormItem>
</FormItems>
<FormButtons>
<button id="btnSave" type="submit" class="btn btn-sm btnAction btn-action-filled-blue mr-1 mt10">
@if (saving)
{
<span class="spinner-border spinner-border-sm mr-1"></span>
}
@Resources.OK
</button>
<button id="btnCancel" type="button" class="btn btn-sm btnAction btn-action-stroke-black mt10" @onclick="@Cancel">
@Resources.Cancel
</button>
</FormButtons>
</TelerikForm>
i am trying to prevent model close when i changes some text after that press enter key then Model close automatically
<FormValidation>
<FluentValidationValidator />
</FormValidation>
<FormItems>
<FormItem Id="fiInvoiceFooterElemenName" ColSpan="2">
<Template>
<label class="k-label k-form-label" for="ddlInvoiceFooterElement">@Resources.InvoiceFooterElementName</label>
<TelerikDropDownList Id="ddlInvoiceFooterElementName"
TItem="@InvoiceFooterElementCategory"
TValue="@Guid"
TextField="@nameof(InvoiceFooterElementCategory.FullName)"
ValueField="@nameof(InvoiceFooterElementCategory.InvoiceFooterElementCategoryId)"
Data="@invoiceFooterElementCategories"
@bind-Value="@invoiceFooterElementLine.InvoiceFooterElementCategoryId"
OnChange="OnChangeInvoiceFooterElementCategories"
Width="100%"
DefaultText="@Resources.SelectInvoiceFooterElementCategory">
<DropDownListSettings>
<DropDownListPopupSettings Height="auto" MaxHeight="250px" Width="auto" />
</DropDownListSettings>
@* <ItemTemplate>
<span>@($"{context.Name} ({context.Code})")</span>
</ItemTemplate> *@
</TelerikDropDownList>
<ValidationMessage For="@(() => invoiceFooterElementLine.InvoiceFooterElementCategoryId)" />
</Template>
</FormItem>
</FormItems>
<FormButtons>
<button id="btnSave" type="submit" class="btn btn-sm btnAction btn-action-filled-blue mr-1 mt10">
@if (saving)
{
<span class="spinner-border spinner-border-sm mr-1"></span>
}
@Resources.OK
</button>
<button id="btnCancel" type="button" class="btn btn-sm btnAction btn-action-stroke-black mt10" @onclick="@Cancel">
@Resources.Cancel
</button>
</FormButtons>
</TelerikForm>
i am trying to prevent model close when i changes some text after that press enter key then Model close automatically
1 answer
93 views
Hi,
I am reacting to the need for unbind two system solutions for Template RenderFragment of FomItem. If I use standard FormItem, I am getting everything solved - styles, messages, label, ... However just because I need TextArea instead of standard input, the very first thing I am loosing is for in label, because for unknown reason your components have given ID and it cannot be read for that for attribute of label. After losing that standard behaviour, I am also losing error propagating and validations. I am supposed to manually retrieve error messages with TelerikValidationMessage, however for some unknown reason you've enforced Expression for FieldIdentifier and hide the possibility to set FieldIdentifier manually. So I had to derive my custom component, hide your For parameter and set it to "() => default" so it would not trigger null check exception.
Now, why all this. Because I've successfully cloned original Model with all properties and attributes with custom Assembly. I am also able to omit or include ValidationAttribute attributes - thus enabling or disabling validations. And for those templates, I've made RenderFragment<EditModel<TValue>> extension of your Template (I hate Blazor for inability to extend parameters - I had to create a new one - BindTemplate), so I was also able to cover that original model with BindValue property, which has all attributes included and it is also properly notifying EditContext if wrapped value changed - to original FieldIdentifier. So now I can have BindTemplate with not only correct typed binding for any two way binding with property, but also GetValidationMessage ony my EditModel Context, so everything within that template without need to manually do that work. It is up to you, if you want to include my project or create some other form type for that. However, it would be nice, since My system is much more robust and provides binded way for message and its property to be used within the template:
<AnetFormItem EditModel="() => this.Is.Your.Previous.For.Attribute">
<BindTemplate Context="model">
<TelerikTextArea @bind-value="model.BindValue">
@model.GetValidationMessage()/* No For here, it is already binded within Context model */
</BindTemplate>
</AnetFormItem>
Dimo
Telerik team
answered
on
23 Dec 2024
1 answer
212 views
Hi, sorry if this is a basic question, but I cannot for the life of me figure out how to get this to work. I can have a DropDown list and a form separately, but when I try to put the DropDown into the form itself, I get a "Object of type 'Telerik.Blazor.Components.FormItem' does not have a property matching the name 'ChildContent'" error.
Here's a sample snippet of what I'm trying to do:
<TelerikForm Model="@Input"
Columns="3"
ColumnSpacing="50px"
OnValidSubmit="@HandleValidSubmit"
OnInvalidSubmit="@HandleInvalidSubmit">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Model.Attribute)"></FormItem>
<FormItem Field="@nameof(Model.Attribute2)">
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="Model.Attribute3">
</TelerikDropDownList>
</FormItem>
<FormItem Field="@nameof(Model.Attribute4)"></FormItem>
</FormItems>
</TelerikForm>
Jeff
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
16 Dec 2024
1 answer
96 views
Hi Everyone,
I am trying to include a component in my TelerikForm which will contain a <FormGroup>, <FormItems> and all the bits for a mailing address. This has been giving me some grief and I would love some help. Here's what I have:
Here's the outside component:
@page "/agencies/new"
@using kpow.interfaces.Services.Agencies
@using kpow.Ui.Components
@inject IAgencies AgencyService
<TelerikForm EditContext="formContext">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
<TelerikValidationSummary />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Agency.Name)" LabelText="Name" />
<FormItem Field="@nameof(Agency.AgencyType)" LabelText="Agency Type" />
<AddressSubForm
Address="@Agency.Address"
SetAddress="address => Agency.Address = address"/>
</FormItems>
</TelerikForm>
@code {
private Agency Agency { get; } = new() { Address = new Address() };
EditContext formContext { get; set; }
protected override void OnInitialized()
{
formContext = new EditContext(Agency);
base.OnInitialized();
}
}
Here's the AddressSubForm Component:
@inject interfaces.Services.Ports.ICountries CountryService
<FormGroup LabelText="Address">
<FormItem Field="@nameof(Address.ToLine)" LabelText="ToLine" ></FormItem>
<FormItem Field="@nameof(Address.Street1)" LabelText="Street"></FormItem>
<FormItem Field="@nameof(Address.Street2)" LabelText="Street 2"></FormItem>
<FormItem Field="@nameof(Address.City)" LabelText="City"></FormItem>
<FormItem Field="@nameof(Address.PostalCode)" LabelText="Postal Code"></FormItem>
@if (ShowRegions == true)
{
<FormItem Field="@nameof(RegionId)" LabelText="Region">
<Template>
<TelerikDropDownList Data="@regions"
TextField="Name"
ValueField="Id"
@bind-Value="RegionId">
</TelerikDropDownList>
</Template>
</FormItem>
}
<FormItem Field="@nameof(CountryId)" LabelText="Country">
<Template>
<TelerikDropDownList Id="cbCountries"
TextField="Name"
ValueField="Id"
Data="@countries"
OnChange="CountryChanged"
@bind-Value="CountryId">
</TelerikDropDownList>
</Template>
</FormItem>
</FormGroup>
@code {
[Parameter] public Address Address { get; set; } = new Address();
[Parameter] public Func<Address, Address>? SetAddress { get; set; }
private IEnumerable<Country>? countries { get; set; }
private IEnumerable<Region>? regions { get; set; }
private bool ShowRegions { get; set; } = false;
private string ToLine { get; set; } = string.Empty;
private string Street1 { get; set; } = string.Empty;
private string? Street2 { get; set; } = string.Empty;
private string City { get; set; } = string.Empty;
private int? RegionId { get; set; } = null;
private string PostalCode { get; set; } = string.Empty;
private int? CountryId { get; set; } = null;
{
ToLine = Address.ToLine;
Street1 = Address.Street1;
Street2 = Address.Street2;
City = Address.City;
RegionId = Address.RegionId;
PostalCode = Address.PostalCode;
CountryId = Address.CountryId;
countries = await CountryService.GetAll();
}
private async Task CountryChanged(object value)
{
CountryId = (int)value; // Ensure CountryId is updated
Address = SetAddress(Address with { CountryId = (int)value, RegionId = null });
switch (CountryId)
{
case 185: //usa
case 32: //canada
{
regions = await CountryService.GetRegions(CountryId.Value);
ShowRegions = true;
break;
}
default:
{
ShowRegions = false;
break;
}
}
}
private void RegionChanged(object value)
{
Address = SetAddress(Address with { RegionId = (int)value });
}
}
When this runs, I can see the rendered labels in the right place for the Address, but the countries drop down is not filled even though the data is present in the OnInitializedAsync when it calls await CountryService.GetAll(); Also, none of the form fields in Address render - only the label. There is an error in console per field in the Address component that is not using a template:
Unhandled exception rendering component: Value cannot be null. (Parameter 'For')
System.ArgumentNullException: Value cannot be null. (Parameter 'For')
at Telerik.Blazor.Components.Common.BaseComponent.ThrowIfParameterIsNull(Object argumentValue, String argumentName)
at Telerik.Blazor.Components.Validation.ValidationMessageBase`1[[System.Object, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnParametersSet()
at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
I'm looking forward to hearing your ideas! Thanks!
-scott
Nadezhda Tacheva
Telerik team
answered
on
28 Aug 2024
0 answers
170 views
We recently updated to Telerik.UI.for.Blazor 6.0.0 and now none of the forms on our website will submit using the "Enter" key on the keyboard. You must now either click or tab to the button and then hit enter.
This was not an issue with the previous version that we had pulled in.
Is there a fix for this or a new implementation pattern that needs to be used to support this?
