Telerik Forums
UI for Blazor Forum
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
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:
<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)
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)

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.


[2025-04-16T16:55:34.549Z] Error: System.InvalidOperationException: Unable to set property 'columns' on object of type 'Telerik.Blazor.Components.TelerikForm'. The error was: Unable to cast object of type 'System.String' to type 'System.Int32'. ---> System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Int32'. at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[TTarget,TValue](Action`2 setter, Object target, Object value) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value) --- End of inner exception stack trace --- at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target) at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) at Telerik.Blazor.Components.TelerikForm.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

 

 <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

bimal
Top achievements
Rank 1
Iron
 asked on 16 Apr 2025
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()

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 05 Apr 2025
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?

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 26 Mar 2025
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
Rajkumar
Top achievements
Rank 1
 asked on 08 Jan 2025
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>
It seems more logical to me - to derive that BindValue directly form For expression instead making programmer to bind whatever and then figure out the correct MemberExpression for the message. You could also provide RenderFragment for lable on that model and much more - that is meaning of this post ... It is also only logical as this is similar for Grid cell template ...
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>
Sorry for the bad indentation, not sure how else to paste it properly.
Jeff
Top achievements
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;

    protected override async Task OnInitializedAsync()
    {
        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: 

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      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?

billy
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 22 Aug 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?