Telerik Forums
UI for Blazor Forum
1 answer
11 views

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.

Hristian Stefanov
Telerik team
 answered on 25 Mar 2024
1 answer
28 views
Is there a way to keep the show password icon on the textbox whether the textbox is focused or not or when its initialized?
Dimo
Telerik team
 answered on 15 Feb 2024
1 answer
28 views

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>

Dimo
Telerik team
 answered on 14 Feb 2024
1 answer
18 views

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.UnitPriceDisplayFormat="{0:C}" Title="Unit Price" Width="150px" >

            <EditorTemplate>
            @{
            var item = context as ProductDto;
            if (item != null)
            {
                <TelerikNumericTextBox @bind-Value="@item.UnitPrice"/>
            }
            }
            </EditorTemplate>
        </GridColumn>
Hristian Stefanov
Telerik team
 answered on 05 Feb 2024
3 answers
57 views

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

Svetoslav Dimitrov
Telerik team
 answered on 04 Dec 2023
0 answers
172 views
I've run into an issue and searched results have yielded a little, but not quite enough information. My project is in blazor server. I am using telerik form components and fluent validation. Is there a global way to prevent the inputs from submitting as you type? I can use the ValidateOn parameter which is fine but when using a <FormItem> component without a <Template> there is no way to do such. Also, i would like the textboxes and other inputs to not bind at all until onblur to prevent excess server calls. In those instances, i can work around it using the DebounceDelay parameter of the textbox but that seems the wrong approach. Finally, with the debounce delay, is it executed on the server or client? Meaning, if i use the DebounceDelay approach is a c# Timer still running and the component still communicating with the server as you type? Thank you in advance for any help or feedback!
Alex
Top achievements
Rank 1
 asked on 25 Sep 2023
5 answers
942 views

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

Coding Machine
Top achievements
Rank 2
Iron
 updated answer on 09 Aug 2023
1 answer
45 views

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();
}

Yanislav
Telerik team
 answered on 16 Jun 2023
0 answers
82 views
For the Telerik UI For Blazor, I need to prevent the button from refreshing the page and for a textbox I need to format it as a phone number. I could not find answers to this in the documentation or searching the internet. It keeps referring me back to Kendo UI. How can I achieve this?
Richard
Top achievements
Rank 1
 asked on 02 Apr 2023
1 answer
57 views

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.

 

Dimo
Telerik team
 answered on 16 Mar 2023
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?