Hello
I want to write a desired text instead of calendar numbers.
For example, as specified in the attached file, I want to write the desired text (8 day of month) instead of the number 8.
I tried through the event:
OnCalendarCellRender="@OnCalendarCellRenderHandler"
but I did not get the result.
Please help me.

Hi, my goal is validate a form and focus telerik widget with validation errors.  

Now i can find the element search for class "k-invalid" but how to get the widget reference so i can call the FocusAsync() method?

Thanks

Hello Telerik Community,

I'm currently working on a Blazor application using the Telerik UI components, and I've run into an issue regarding the default validation behavior of the DateInput component. By default, the DateInput performs validation that sometimes interferes with my application's requirements.

Problem Description

When using the DateInput component, I noticed that it automatically validates the entered date and displays validation messages if the input does not conform to expected formats or ranges. However, I need to customize this behavior and allow users to enter dates without triggering these default validation checks.

Steps Taken

I've explored various approaches, including:

1. Custom Validation Attributes: Attempted to apply custom validation attributes to override the default behavior.
2. Disabling Validation: Looked for properties or methods to disable validation directly within the DateInput component.
3. Event Handling: Tried handling the OnBlur and OnChange events to manage validation manually.

Questions

1. Is there a built-in way to disable the default validation for the DateInput component?
2. If so, what properties or methods should I utilize to achieve this?
3. Are there best practices for implementing custom validation for the DateInput that you would recommend?

Hello,

We are using blazor Webassembly with Telerik and its localization/globalization. Everything works fine.

Client ask us a little detail, to "translate" the mask format for date input ( TelerikDatePicker, ... ). 

For example, if we use the french culture "fr-BE"we would like to transform "dd/MM/yyyy" to "jj/MM/aaaa" (day => jour; Month => Mois; year => année) or something similar. In Telerik UI for Angular, we have it translated =>  

How can we achieve that for Telerik UI for Blazor ?

Kind regards,

Quentin.

Hello,

I'm working on a .NET8 Blazor webapp with some InteractiveAutoRenderMode. I'm trying to figure out how to code the HTML/Razor in a Blazor component to be able to display a pair of inputs and then bind a collection of a complex type.
I also want the possibility for the user to add more instances to the collection within the UI/component by being able to add more inputs (through a button click) before submitting the form.

I am not sure how to capture the properties inside the complex type collection for the FieldIdentifier instance usually helping with binding and validation? And then how would that work within a loop for the user to be able to add more instances to the collection?

FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime)

The HTML for the pair of inputs looks like this:

ManageProductOffer.razor :

<div class="input-group">
    <label for="@($"""idAvailabilityStartInput""")">
        <input type="datetime-local" id="@($"""idAvailabilityStartInput""")" name="fAvailabilityStart"
                step="any" min="@(TimeProvider.GetLocalNow().LocalDateTime.ToString(SortableDateTimePatternFormat))"
                class="@(ApplyStyleForValidationState(FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities)))"
                value="@(NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime.ToString(SortableDateTimePatternFormat))"
                @onchange=@(changeEventArgs => TryBindAndValidateField(
                    changeEventArgs: changeEventArgs,
                    fieldIdentifier: FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime),
                    validationDelegate: () => LimitedAvailability.ValidateLimitedAvailability(NewProductOfferModel!.LimitedAvailabilities[0]))) />
    </label>

    <label for="@($"""idAvailabilityEndInput""")">
        <input type="datetime-local" id="@($"""idAvailabilityEndInput""")" name="fAvailabilityEnd"
                step="any" min="@(TimeProvider.GetLocalNow().LocalDateTime.ToString(SortableDateTimePatternFormat))"
                class="@(ApplyStyleForValidationState(FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities)))"
                value="@(NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityEndTime.ToString(SortableDateTimePatternFormat))"
                @onchange=@(changeEventArgs => TryBindAndValidateField(
                    changeEventArgs: changeEventArgs, 
                    fieldIdentifier: FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityEndTime),
                    validationDelegate: () => LimitedAvailability.ValidateLimitedAvailability(NewProductOfferModel!.LimitedAvailabilities[0]))) />
    </label>
    <small class="">
        <ValidationMessage For="@(() => NewProductOfferModel!.LimitedAvailabilities[0])" />
    </small>
</div>

And the code for the model with the complex type collection looks like this:

ProductOfferModel.cs :

public sealed record class ProductOfferModel
{
    public Guid ID { get; init; } = Guid.NewGuid();
    public String ProductOfferDescription { get; set; } = String.Empty;
    public Guid ProductID { get; set; } = Guid.Empty;
    public String ProductDescription { get; set; } = String.Empty;
    public List<LimitedAvailability> LimitedAvailabilities { get; set; } = [new LimitedAvailability()];
}

public sealed record class LimitedAvailability
{
    public Guid ID { get; init; } = Guid.NewGuid();
    public DateTime LimitedAvailabilityStartTime { get; set; } = DateTime.MinValue;
    public DateTime LimitedAvailabilityEndTime { get; set; } = DateTime.MinValue;

    internal static Boolean ValidateLimitedAvailability( LimitedAvailability limitedAvailability )
    {
        ArgumentNullException.ThrowIfNull(limitedAvailability);

        return limitedAvailability.LimitedAvailabilityStartTime < limitedAvailability.LimitedAvailabilityEndTime ?
            true
            : false;
    }
}

The (microsoft documentation) mentions supporting complex type and be able to nest and bind, however it does not seems to mention how to capture the FieldIdentifier accessor for a property inside complex type to customize @onchange or @oninput  behavior for example.

Anyone has been solving something similar with using collections of complex types and letting the user add more inputs to the form before submit?

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

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