<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)
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">
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()
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?
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>
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>
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;
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:
I'm looking forward to hearing your ideas! Thanks!
-scott
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?