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
13 views

Date Picker UI component is unresponsive. The calendar drop down does not work and masking is not being applied. I followed the instructions on First Steps with UI for Blazor in a Web App - Telerik UI for Blazor I have the nuget package set up, I have the scripts in, I followed the instructions and double checked that I followed all of them. I can't figure out why this ui component is not working.

 

@page "/datePicker"
@attribute [StreamRendering]

<PageTitle>Telerik DatePicker</PageTitle>


The selected date is: @datePickerValue.ToShortDateString()
<br />

<TelerikDatePicker @bind-Value="datePickerValue"
                   Format="dd MMMM yyyy"
                   Min="@Min" Max="@Max">
</TelerikDatePicker>

@code {
    DateTime datePickerValue { get; set; } = DateTime.Now;
    public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
    public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
}

 

Dimo
Telerik team
 answered on 13 Mar 2024
2 answers
18 views

Hy,

In my application I had to insert the localization with the default Italian language.

I followed the points explained in this link step by step: Blazor Localization - Telerik UI for Blazor

Inside my application I therefore have a Resources folder with the following files inside:
TelerikMessages.resx and TelerikMessages.it-IT.resx (set as default on Program.cs).

My problem is the following: in debug the localization for the DateTimePicker or NumericTextBox components works correctly showing me the date and number formats in Italian with the related translated texts.

However, once I insert my application into a docker container, the localization seems to have no effect, showing both components in English language and format.

My Resources Folder:

However, localization for the Grid component works correctly in both cases.

Attached is the behavior of the date picker in debug mode and inside a docker container.

Can anyone give me a solution without using the Format property of the components but using localization? My application is in Dotnet 8

Thanks.

Marco
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 11 Mar 2024
2 answers
35 views

Hy,

I have an EditForm for inserting a Model Dto. 

The Dto Model has two dates. The start date which is of type DateOnly and the end date which is of type DateOnly nullable.

Although the end date is null, the date picker sets the value "01/01/2001" by default and I can't find a way to enter a null value using this component because if I try I get the error: "The date format is not parsable. Please enter valid date".

This is my code:

Can anyone tell me if this is a feature that has yet to be implemented or if I'm doing something wrong?

I attach photos of the edit form.

Thank you

Marco
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 04 Mar 2024
1 answer
18 views

Hi,

Is it possible to configure the date picker to only show the month and year?

Regards,

Omar

Hristian Stefanov
Telerik team
 answered on 01 Mar 2024
1 answer
15 views

Hi,

The DatePicker gives a runtime error on Hybrid (does works on blazor server)

<TelerikDatePicker Value="@entity.OrderDate.Date" Format="dd-MM-yyyy" ValueChanged="@((DateTime d) => UpdateDateTimeOffsetField(d))" />

If i remove the datapicker tag, there is no problem. I suspect it has something to do with the hybrid stuff

Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\8.0.2\System.Collections.Immutable.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
Base.ErrorHandler:HandleError: System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
 ---> System.Exception: A Telerik component on the requested view requires a TelerikRootComponent to be added to the root of the MainLayout component of the app. Read more at: https://docs.telerik.com/blazor-ui/getting-started/what-you-need#project-configuration
   at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.OnInitializedAsync()

 

 

 

Dimo
Telerik team
 answered on 01 Mar 2024
1 answer
13 views

When user click on the input field of DatePicker, it either select date, or month, or year, but we want to select whole date input field like it highlights/selects whole content on Tab key.

Tried  with the following code but still no luck.

<span @onfocusin="@FocusHandler">
    <TelerikDatePicker @bind-Value="@SelectedDate"
                       Min="@Min"
                       Max="@Max"
                       Format="MM/dd/yyyy"
                       DebounceDelay="@DebounceDelay"
                       ShowWeekNumbers="true"
                       @ref="@DateRef">
                       <DatePickerFormatPlaceholder Day="day" Month="month" Year="year" />
    </TelerikDatePicker>
    </span>

@code {
    private DateTime? SelectedDate { get; set; }
    private DateTime Max = new DateTime(2050, 12, 31);
    private DateTime Min = new DateTime(1950, 1, 1);
    private int DebounceDelay { get; set; } = 200;
    private TelerikDatePicker<DateTime?> DateRef { get; set; }
    private async Task FocusHandler()
    {
        await DateRef.FocusAsync();
    }
}

 

It gets selected on buttonclick though (code snippet below where it selects all content on button click) - 

<TelerikButton OnClick="@FocusHandler">Focus Date</TelerikButton>
    <TelerikDatePicker @bind-Value="@SelectedDate"
                       Min="@Min"
                       Max="@Max"
                       Format="MM/dd/yyyy"
                       DebounceDelay="@DebounceDelay"
                       ShowWeekNumbers="true"
                       @ref="@DateRef">
                       <DatePickerFormatPlaceholder Day="day" Month="month" Year="year" />
    </TelerikDatePicker> 
@code {
    private DateTime? SelectedDate { get; set; }
    private DateTime Max = new DateTime(2050, 12, 31);
    private DateTime Min = new DateTime(1950, 1, 1);
    private int DebounceDelay { get; set; } = 200;
    private TelerikDatePicker<DateTime?> DateRef { get; set; }
    private async Task FocusHandler()
    {
        await DateRef.FocusAsync();
    }
}

 

Any help would be appreciated! TIA.

-Neelima

Hristian Stefanov
Telerik team
 answered on 29 Feb 2024
1 answer
31 views
I use the TelerikDatePicker: I enter a date and I remove it again, then I click on the calendar icon and I receive an exception...



Microsoft.AspNetCore.Components.Web.ErrorBoundary | Message: Unhandled exception rendering component: "Object reference not set to an instance of an object."
System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.TelerikDatePicker`1.get_AriaActiveDescendant()
   at Telerik.Blazor.Components.TelerikDatePicker`1.<>c__DisplayClass111_0.<BuildRenderTree>b__2(RenderTreeBuilder __builder2)
   at Microsoft.AspNetCore.Components.CascadingValue`1.Render(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
Tsvetomir
Telerik team
 answered on 21 Feb 2024
5 answers
34 views

I have this code:

    <TelerikDatePicker @bind-Value="@Value" Width="400px" Format="dd/MM/yyyy">
    </TelerikDatePicker>

 

this results in this:

Why is it not the format dd/MM/yyyy as I specified?

Dimo
Telerik team
 answered on 15 Feb 2024
1 answer
1.4K+ views

Hello

=====

Telerik EDIT: Please update to version 5.0.1 or scroll down to this post with a summary of the problem.

=====

I'm trying to use latest Telerik Blazor 4.4.0 with dotnet 8.0preview7

Everything is looking ok on Debug sidebut after building and publishing project to IIS I get an error from rendering any gauge chart (I tried Arc and Radial)

Debug:

IIS:

Log from DevTools

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: ConstructorContainsNullParameterNames, System.Collections.Generic.KeyValuePair`2[System.String,System.String]
System.NotSupportedException: ConstructorContainsNullParameterNames, System.Collections.Generic.KeyValuePair`2[System.String,System.String]
   at System.Text.Json.ThrowHelper.ThrowNotSupportedException_ConstructorContainsNullParameterNames(Type )
   at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.PopulateParameterInfoValues(JsonTypeInfo )
   at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.CreateTypeInfoCore(Type , JsonConverter , JsonSerializerOptions )
   at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.CreateJsonTypeInfo(Type , JsonSerializerOptions )
   at System.Text.Json.Serialization.Metadata.DefaultJsonTypeInfoResolver.GetTypeInfo(Type , JsonSerializerOptions )
   at System.Text.Json.JsonSerializerOptions.GetTypeInfoNoCaching(Type )
   at System.Text.Json.JsonSerializerOptions.CachingContext.CreateCacheEntry(Type type, CachingContext context)
--- End of stack trace from previous location ---
   at System.Text.Json.JsonSerializerOptions.CachingContext.CacheEntry.GetResult()
   at System.Text.Json.JsonSerializerOptions.CachingContext.GetOrAddTypeInfo(Type , Boolean )
   at System.Text.Json.JsonSerializerOptions.GetTypeInfoInternal(Type , Boolean , Nullable`1 , Boolean , Boolean )
   at System.Text.Json.Serialization.Metadata.JsonTypeInfo.Configure()
   at System.Text.Json.Serialization.Metadata.JsonTypeInfo.<EnsureConfigured>g__ConfigureSynchronized|170_0()
   at System.Text.Json.Serialization.Metadata.JsonTypeInfo.EnsureConfigured()
   at System.Text.Json.JsonSerializerOptions.GetTypeInfoInternal(Type , Boolean , Nullable`1 , Boolean , Boolean )
   at System.Text.Json.JsonSerializerOptions.GetTypeInfoForRootType(Type , Boolean )
   at System.Text.Json.JsonSerializerOptions.TryGetPolymorphicTypeInfoForRootType(Object , JsonTypeInfo& )
   at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1[[System.Object, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].Serialize(Utf8JsonWriter , Object& , Object )
   at System.Text.Json.JsonSerializer.WriteString[Object](Object& , JsonTypeInfo`1 )
   at System.Text.Json.JsonSerializer.Serialize[Object](Object value, JsonSerializerOptions options)
   at Telerik.Blazor.Common.Serialization.DefaultJavaScriptSerializer.Serialize(Object value)
   at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
   at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
   at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
   at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
   at Telerik.Blazor.Common.Serialization.JavaScriptInitializer.Serialize(IDictionary`2 object)
   at Telerik.Generated.Blazor.Components.DataVizComponent.Serialize(IJavaScriptInitializer serializer)
   at Telerik.Generated.Blazor.Components.DataVizComponent.Serialize()
   at Telerik.Generated.Blazor.Components.DataVizComponent.InitOrUpdateWidget()
   at Telerik.Generated.Blazor.Components.DataVizComponent.OnAfterRender(Boolean firstRender)
   at Telerik.Blazor.Components.TelerikRadialGauge.OnAfterRender(Boolean firstRender)
   at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleAfterRender.OnAfterRenderAsync()
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.NotifyRenderCompletedAsync()

 

Thanks for reply

Dimo
Telerik team
 updated answer on 21 Nov 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?