I just updated our .NET 8 Blazor webapp from Telerik 5.0.1 to 5.1.1. Now, interacting with any input in a form applies validation classes to all other inputs in the form. I hope this behavior is unintentional as it could lead to user confusion. I believe this was introduced in the 5.0.1 update which was supposed to fix the issue of validation classes being present on initial render. I could find no other documentation or discussion regarding this.
This behavior can be seen in the Form - Validation demo...
Blazor Form Demos - Validation | Telerik UI for Blazor
Type valid input in the Graduate Grade field and all other fields turn green even though they don't have valid input...
Clicking Submit to show that those fields are not valid.
Hi,
This seems to effect most telerik components, but if for example using a TelerikCheckBox and the ValueChanged event is an async function, then the error boundry wont catch the exception. This works from basic checkboxes or if not using async.
Example:
<div>
Telerik checkbox (does NOT display any error): <TelerikCheckBox TValue="bool" ValueChanged="@OnCheck" />
</div>
<div>
Basic checkbox (displays the error): <input type="checkbox" @onchange="@OnCheck" />
</div>
@{
async Task OnCheck()
{
throw new Exception("Something went wrong!");
}
}
MainLayout:
<ErrorBoundary>
<ChildContent>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
<TelerikRootComponent>
@Body
</TelerikRootComponent>
</article>
</main>
</div>
</ChildContent>
<ErrorContent>
ERROR!!!
</ErrorContent>
</ErrorBoundary>
We modified the code in the InCell Editing demo (Blazor Components Demos and Examples - Telerik UI for Blazor) with the Telerik REPL tool to include an EditorTemplate for the UnitPrice column. If we type in the column quickly and press tab to exit the field the input is cutoff. ie; we type 155 and the value shown in the grid after the update is 15. We have recorded a video showing the problem but we are unable to upload here.
In our own sample application that we built to isolate the problem we saw the same behavior with TelerikTextBoxes and TelerikNumericTextBoxes.
Is this a known problem with a known solution?
The code used for the EditorTemplate
<GridColumn Field=@nameof(ProductDto.UnitPrice) DisplayFormat="{0:C}" Title="Unit Price" Width="150px" >
Hi,
I tried to replace the standard controls in Register.razor (Identity page) with Telerik controls (TextBox). But the behaviour of your controls seems to be different.
Working code with standard and Telerik controls:
@page "/Account/Register"
<PageTitle>@_IdentityLocalizer["TitleRegister"]</PageTitle>
<h1>@_IdentityLocalizer["TitleRegister"]</h1>
<div class="row">
<div class="col-md-4">
<StatusMessage Message="@Message" />
<EditForm Model="@Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="RegisterUser" FormName="register">
<DataAnnotationsValidator />
<ValidationSummary />
<h2>Create a new account.</h2>
<hr />
<div class="k-form-field">
<label id="textBoxEmail">@_IdentityLocalizer["LabelEmail"]</label>
<TelerikTextBox @bind-Value="@Input.Email" Id="textBoxEmail" />
<TelerikValidationMessage For="@(() => Input.Email)" />
</div>
<div class="k-form-field">
<label id="textBoxPassword">@_IdentityLocalizer["LabelPassword"]</label>
<TelerikTextBox @bind-Value="@Input.Password" Password Id="textBoxPassword" />
<TelerikValidationMessage For="@(() => Input.Password)" />
</div>
<div class="k-form-field">
<label id="textBoxConfirmPassword">@_IdentityLocalizer["LabelConfirmPassword"]</label>
<InputText id="textBoxConfirmPassword" type="password" @bind-Value="Input.ConfirmPassword" />
<TelerikValidationMessage For="@(() => Input.ConfirmPassword)" />
</div>
<div class="k-form-field">
<TelerikButton ButtonType="ButtonType.Submit">@_IdentityLocalizer["ButtonRegister"]</TelerikButton>
</div>
</EditForm>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
</section>
</div>
</div>
After clicking the submit button the result seems correct:
After replacing the last input control with Telerik control the code looks like this:
<div class="k-form-field">
<label id="textBoxConfirmPassword">@_IdentityLocalizer["LabelConfirmPassword"]</label>
<TelerikTextBox @bind-Value="@Input.ConfirmPassword" Password Id="textBoxConfirmPassword" />
<TelerikValidationMessage For="@(() => Input.ConfirmPassword)" />
</div>
Now I get the following exception when trying to submit (nothing entered):
It seems that the model instance (Input) is null after trying to submit the (empty) form. For me it is not understandable why the behaviour of your controls are so different to standard controls.
Is there a chance to use Telerik controls in Identity pages?
Regards, Stefan
Hi, in our application we receive notification from server signalR connection and update some controls UI (typical progress bar and TextBox).
I found an issue who generate an OutOfMemory exception when we loop to update ui with telerik controls.
I have replied the issue with a demo project (see attachment).
Note who i can reply the issue with this conditions:
- Initialize a SignalR connection (initialized but unused..)
- Use Telerik controls inside a EditForm (in the sample TelerikTextBox and TelerikNumericTextBox)
To reply the issue i generate an infinite loop who raise an event, inside the event handler i simply update ui controls and call StateHasChanged().
Starting the loop it reach about 2GB of memory in about 90 seconds and then raise an outofmemory exception.
If i replace TelerikTextBox/TelerikNumericTextBox with simple input control the memory grow up and remain stable to about 500MB without raising the OutOfMemory exception, so i think who garbage collector do his job.
If i not initialize the SignalR connection, the memory leak does not occurs.
Waiting for your reply.
Thanks
Blazor .Net 7
I have the following TelerikListView. When the user changes the TelerikTextBox Cidr value I want to handle the ValueChanged event however when I do this, I need to update the underlying model object manually. I am stuck. When the TelerikListView is in edit mode, either for a new element or for an existing element I can't figureout how to reference the element correctly in the ValueChanged event handler. I know I need to update the model manually but I am not sure how. Any hints?
<TelerikListView Data="@SubnetList" Width="700px" Pageable="true"
OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler"
OnEdit="@EditHandler" OnCancel="@CancelHandler">
<HeaderTemplate>
<h2>Subnet List</h2>
<ListViewCommandButton Command="Add" Icon="@FontIcon.Plus">Add Subnet</ListViewCommandButton>
</HeaderTemplate>
<Template>
<div class="listview-item">
<h4>@context.Cidr</h4>
<ListViewCommandButton Command="Edit" Icon="@FontIcon.Pencil">Edit</ListViewCommandButton>
<ListViewCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</ListViewCommandButton>
</div>
</Template>
<EditTemplate>
<div style="border: 1px solid green; margin: 10px; padding: 10px; display: inline-block;">
<TelerikFloatingLabel Text="CIDR">
<TelerikTextBox Id="Cidr" ValueChanged="@CidrValueChangedHandler" />
</TelerikFloatingLabel><br />
<ListViewCommandButton Command="Save" Icon="@FontIcon.Save">Save</ListViewCommandButton>
<ListViewCommandButton Command="Cancel" Icon="@FontIcon.Cancel">Cancel</ListViewCommandButton>
</div>
</EditTemplate>
</TelerikListView>
@code {
private List<Models.Subnet> SubnetList = new List<Models.Subnet>();
protected override async Task OnInitializedAsync()
=> SubnetList = await SubnetService.GetAllAsync();
private void CidrValueChangedHandler(string theUserInput)
{
// manually update the model here
// calculate subnet properties here to help the user select size the subnet
// correctly by selecting the number of bits in the network side of the mask
// # number of hosts, etc.
}
async Task GetListViewData()
=> SubnetList = await SubnetService.GetAllAsync();
}
I've made a custom FormItem and I need access to the EditContext. This works, but - is there a simpler way to get access to the EditContext?
The Form:
<TelerikForm
Model="@AWonderfullModel"
OnSubmit="@OnSubmitHandler"
@ref="@FormRef">
<FormItems >
<CascadingValue Name="TheForm" Value="@FormRef">
@foreach (var row in RexFormItems)
{
<DynamicComponent Type="@row.Component" Parameters="@row.Parameter"/>
}
</CascadingValue>
</FormItems>
....
</TelerikForm>
I populate the FormRef via the CascadingValue
and in my CustomControl simple:
[CascadingParameter]
public TelerikForm TheForm { get; set; }
....
protected override void OnParametersSet()
{
Model = TheForm.EditContext.Model;
...
}
This works well, but we discussed this and there was the Idea, that the Form or the EditContext is reachable in an other way.