I have a TelerikTextBox control inside a GridColumn in TelerikGrid. The cursor inside the textbox flickers for every character entered causing a very bad user experience.
I tried removing @bind-value and having just OnChange() or OnBlur as I learned @bind-value and OnChange do not go well together but then I get
Error: System.InvalidOperationException: Telerik.Blazor.Components.TelerikTextBox requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'
<TelerikGrid>
<GridColumns>
<GridColumn Title="NewTitle" OnCellRender="_editableSource.SetEditableCellCss" Width="320px">
<Template>
@if (context is UserModel con)
{
<EditableDataGridField Model="@con" For="@(() => con.UserIdentification)" EditContext="_pageRef.EditContext">
<ViewTemplate>
<span data-someValue="@con?.UserIdentification">@con?.UserIdentification</span>
</ViewTemplate>
<EditTemplate>
<TelerikTextBox @bind-Value="UserIdentification" OnChange="() => UserIdentification_OnChangeAsync(con)" />
</EditTemplate>
</EditableDataGridField>
}
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
There is a similar logic in another page which works perfectly fine, only difference is that this is not inside a TelerikGrid. And I tried using TelerikTextBoxStyled as well but it wouldn't work
TelerikTextBoxStyled.razor is as below
@inherits TelerikStyledBase.TelerikTextBoxStyledBase
<StyleComponent Source="@this" Name="">
</StyleComponent>
@BaseContent
@code {
protected async override Task OnApplyStyleAsync(StyleParameters styleParameters)
{
if (styleParameters.IsDefaultStyle())
{
styleParameters.SetParameter(() => this.DebounceDelay, 1000);
}
}
}