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

Cannot type in date into TelerikDateInput if AllowCaretMode is true and the DateInput focus is in the whole input,

how to reproduce:

move focus to DateInput from previous input (whole dateInput is in focus)

Type in 01 into the DateInput, the caret will move to end, but no value filled.

This is the REPL page:

https://blazorrepl.telerik.com/GnYsHlcv54uXw7hd34

this is the form and how to reproduce:

I have a DatePicker and a DateInput bound to the same nullable DateTime property (for behavior testing purposes).

<TelerikDateInput @bind-Value="@TestDate" />
<TelerikDatePicker @bind-Value="@TestDate" />

public DateTime? TestDate { get; set; } = null;

As it isn't a required field, the user can fill in the field and delete it afterwards (by selecting the full date and pressing the "Del" key). When this happens, the DateInput, in terms of layout behaves as if it has never been filled. On the other hand, the DatePicker shows a red border as if it was a required field that has yet to be filled in.

Is there any way to not show the red border when the DatePicker is cleared?

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

Since upgrading from Telerik 3.0.1 to 3.1.0, DateInput controls no longer bind to properties for me. 

The following works in 3.0.1 but not 3.1.0

@page "/TestPage"

<p>Message: @Message</p>
<p>MyDate: @MyDate</p>

<TelerikTextBox @bind-Value="Message"></TelerikTextBox>
<TelerikDateInput @bind-Value="MyDate" Format="dd/MM/yyyy"></TelerikDateInput>

@code {
    public string Message { get; set; }
    public DateTime MyDate { get; set; }
}

Hi, I try tu use the new Date/TimeOnly types of .Net6 and they are not supported by the Telerik components (you cannot bind them to these types). I tested it on the 2.30.0 version you just released.

It works fine with the Blazor Components (InputDate, input type="time"...) but it is not a practical solution for component like TelerikGrid (it would mean templating everything, breaking the inline validation etc.) or TelerikScheduler/Gantt (I would like to use a DateOnly for its Date property for example, and ideally its model could be a DateOnly and 2 TimeOnly instead of 2 DateTime but that's less important).

Do you have an ETA for their support or a workaround?

Also, is there documentation about the limitations of your .Net6 support so I don't have other bad surprises?

I have a common scenario that my users complain about and find annoying. 

1) I have a DatePicker with format of M/d/yyyy

2)They click in and (for example) quickly type 2/20/2021 expecting that to be the date, instead as soon as they hit the forward slash it jumps to the year and leaves them with 2/d/0020

3) In an attempt to fix it the user will press backspace to delete a character but that clears it all and leaves the yyyy highlighted, forcing them to stop their workflow and click back to the start and be careful not to mess anything up

This is not very user friendly.  Reproducible here: Blazor DatePicker Demos - Overview | Telerik UI for Blazor

I and our users much prefer what they are used to in your Telerik Ajax tools that pops open the calendar when focusing on the box and will allow for free flow typing of a date, allowing a variety of formats on the fly and verify on leaving the field. https://demos.telerik.com/aspnet-ajax/datepicker/overview/defaultcs.aspx

Are there any workarounds or should a feature request be submitted?