This public feature request:

• Explains how the TelerikRootComponent works.
• Outlines the problems of the current software design in static .NET 8 Blazor apps.
• Measures customer demand for a major change that may possibly resolve the current limitations.

How the TelerikRootComponent Works

Historically, the TelerikRootComponent was designed with the following purposes:

• To host and render all Telerik Blazor popups as RenderFragments. This means that all popups are rendered where the TelerikRootComponent is defined in the application's component hierarchy. In most cases, correct popup position requires the TelerikRootComponent to wrap all the content on the web page. Otherwise the correct position is not guaranteed and this is documented. In addition, the TelerikRootComponent instance is a CascadingValue, which allows it to collect all popup RenderFragments.
• The TelerikRootComponent exposes parameters for global application-wide Telerik settings, such as icon type or RTL support. This is another reason why it makes sense to have a single TelerikRootComponent that wraps all the page content.

Problems and Limitations in .NET 8 Blazor Static Apps

.NET 8 Blazor apps with "Per Component" interactivity location create a big challenge for the above state of affairs:

• Cascading values do not pass across render mode boundaries. .NET 8 includes a new feature for passing cascading values to interactive components (builder.Services.AddCascadingValues()), but this mechanism does not support passing of RenderFragments, because they are not JSON serializable. This brings the requirement that the TelerikRootComponent is part of an interactive component hierarchy.
• When the TelerikRootComponent is in a non-layout .razor file, it triggers more re-renders than normally. They are related to internal MediaQuery instances and all popups, which the root component manages.

So, developers who work with a globally static app with specific interactive components ("islands of interactivity") may need to:

• Place the TelerikRootComponent somewhere inside the component hierarchy, so it can't wrap all the page content. This will lead to wrong popup position.
• Use multiple TelerikRootComponents. This requires to define the same parameters for each TelerikRootComponent instance.

Next Steps

All developers who develop static .NET 8 Blazor apps with "Per Component" interactivity location:

1. Please vote for this feature request, so that we can measure how many customers are affected by the described limitations.
2. Post here and describe:
   • Why do you need to use apps with "Per Component" interactivity.
   • Your specific challenges with the current TelerikRootComponent setup.

Hi,

I am looking to use strongly-typed IDs in my project and it does not appear to be possible to achieve this with Telerik UI for Blazor. Instead, the popup does not go away on selection and the bound value does not update.

Note that this is not a request for binding to arbitrary complex types. I believe it would be sufficient to support value types that implement ToString / IParsable.

For example:

https://blazorrepl.telerik.com/QxvcQIPR55jFAGMF00

<h1>Hello, Telerik REPL for Blazor!</h1>
<h2>Selected Value: @SelectedValue</h2>

<TelerikDropDownList Data="@Data"
    @bind-Value="@SelectedValue"
    TextField="@nameof(SelectItem.DisplayName)"
    ValueField="@nameof(SelectItem.Value)"
    DefaultText="Select ...">
</TelerikDropDownList>

@code {
    public MyValue SelectedValue {get; set;}
    public SelectItem[] Data { get; } = new[] {
        new SelectItem(1),
        new SelectItem(2),
    };

    public readonly struct MyValue : System.IParsable<MyValue> {
        public int Value {get;}

        public MyValue(int value) {
            this.Value = value;
        }

        public override string ToString() {
            return Value.ToString();
        }

        public static MyValue Parse(string str, IFormatProvider provider) {
            return new(int.Parse(str, provider));
        }

        public static bool TryParse(string str, IFormatProvider provider, out MyValue value) {
            value = new(int.Parse(str, provider));
            return true;
        }
    }

    public class SelectItem {
        public SelectItem(int value) {
            Value = new(value);
            DisplayName = $"Item {value}";
        }

        public MyValue Value {get; set;}
        public string DisplayName {get; set;}
    }
}

Thanks,
Ben

Hi,

It would be VERY helpful if you integrated "Prevent the Grid from wrapping text in multiple lines and show ellipsis" into grid as an option (so we would not have to write separate code and style).

I think this is one of the most needed features since grids almost always have data that wraps line.

BR, Smiljan

I have a ComboBox that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling down. I'm trying to scroll but it removes the input text.

You can use your own demo examples to replicate this issue. To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo). 

We have a form with multiple TelerikEditor controls bound via @bind-value. The issue arises when there are more than 2 TelerikEditors; the performance is significantly impacted for all input fields. Typing experiences delays, making fast typing impractical.

This performance degradation is attributed to the fact that the page undergoes frequent re-renders when typing into the input fields. Interestingly, this behavior does not occur when TelerikEditor is excluded from the form or page.

While the DebounceDelay property in TelerikEditor helps improve its performance, it does not extend its influence to other input fields in the form or page. Are you familiar with this issue, and do you have any recommendations for addressing or mitigating it?

Using:
WebAssembly
Telerik 4.0.1

Create a word style component.

Currently my wpf desktop app uses a editor style component and refreshes a crystal reports window component to show edits made to a pre created document. We use this to create quote letters using custom legal jargon.

I am in the process of moving that program to Blazor. A word component that i can wrap our custom texts around and buttons in the title bar for pasting our prefomatted text would be so much better than our current setup. 

Could this be added to the roadmap? 

Hi Support Team,

in our project we are using Telerik Chart and has required to update theme of chart from dark to light and light to dark.

telerik chart in child razor page and dark/light button in mainlayout.razor file but telerik chart updating theme when click on button exist telerik chart razor page. as below link  it is an existing issue. 

https://feedback.telerik.com/blazor/1496389-using-custom-themes-changing-at-runtime-does-not-change-the-chart-component-style

please advice how to resolve the issue.

https://docs.telerik.com/blazor-ui/common-features/icons#icon-nuget-packages

When you click "Preview" under Using TelerikFontIcon, the preview is blank, even if I scroll to the top, still nothing.

Hi,

When I use TelerikDatePicker in my own component and the I use this component in Form, the validation for this input on the UI side doesn't work. The k-invalid class is not added, the appriopriate aria-invalid value is not set. The value on the TelerikDataPicker CascadedEditContext side is ok, an error message for this field appears after validation.

If you want to validate a form using FluentValidation right now you must rely on a third party validator like the ones suggested in the FluentValidation documentation.

We have noticed most of these libraries have not been updated in a long while despite issues being opened and pull requests pending:

• Blazored.FluentValidation - Last release: Dec 31, 2022

• Blazor-Validation - Last release: Jun 30, 2023

• Accelist.FluentValidation.Blazor - Last release: Nov 17, 2020

• vNext.BlazorComponents.FluentValidation - Last release: Sep 9, 2022

Also, we noticed that these libraries don't fully implement all the features that FluentValidation has to offer.

Ex: We wanted to use the Rulesets to validate fields partially when the input has changed (like maximum lenght or regexes) and then validate the more complex rules like "unique in DB" after the "submit" button of the form has been pressed but it seemed like it would run all validations ignoring the rulesets.

Other components libraries have already implemented FluentValidation natively, could Telerik consider implementing this aswell so we can stop relying on third party libraries and have a better implementation of the FluentValidation?

Can we get the Infinite Calendar feature that is part of Kendo Angular components? This design is brilliant. It makes it so much easy to get to the date you want. specially went they span over months or years. It find it makes the date picker so much more useful. 

https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/

Is it possible to allow the adding of aria-label, aria-labelledby, and aria-describedby to the TelerikForm element?

I noticed that aria-labelledby and aria-describedby were added to input elements here: https://feedback.telerik.com/blazor/1531788-allow-setting-aria-labelledby-and-aria-describedby-attributes-to-the-telerik-inputs - so I assume they could be added to TelerikForm too?

Currently, there doesn't seem to be a way to add those attributes, whereas with the default EditForm we can, and so we're unable to leverage the TelerikForm if we want to provide better descriptive information to non-sighted users with a label and description of the form.

Ideally, we should be able to render any HTML element with global attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes , which would include any of the aria-* tags.

I understand there's a desire to have a locked-down API for components and not allow arbitrary attributes, but I think certain attributes core to accessibility the users of the library should have some ability to manipulate.

Sorry for the long question/request...

I'm running into an exception during a TelerikScheduler Edit event when trying to initialize the model. I believe this is occurring because the models are complex objects with another object as a property inside it, where the "submodel" does not have a parameterless constructor. I'm receiving the following exception while debugging:

I read this ticket that discusses a similar issue as well as this ticket which describes the OnModelInit event that allows you to create an instance of the model to pass to the CUD event. However, after implementing the OnModelInit handler the error is still occurring because it is trying to clone that object before passing it to the edit event and is attempting to use a constructor with no parameters which does not exist. 

To reiterate the ticket above, it would be nice if the clone process checks to see if the model implements the ICloneable interface. This will allow custom clone behavior which should resolve this issue. Or is there already a fix/workaround for this?

I added a few simplified code segments below as an example of the issue I'm having... (I'm using Blazor Server if that's relevant)

Index.razor:

@page "/"
@using TelerikBlazorTestApp.Models

<TelerikScheduler Data="@Appointments" 
                  AllowCreate="true" AllowDelete="true" AllowUpdate="true"
                  OnModelInit="@ModelInitHandler">
    <SchedulerViews>
        <SchedulerDayView />
        <SchedulerWeekView />
        <SchedulerMonthView />
    </SchedulerViews>
</TelerikScheduler>

@code {
    public List<SchedulerAppointment<TestModel>> Appointments { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Appointments = new List<SchedulerAppointment<TestModel>>()
        {
             new SchedulerAppointment<TestModel> { Title = "Test 1", Start = DateTime.Now, End = DateTime.Now.AddHours(1), IsAllDay = false, Model =  new TestModel("blah") },
             new SchedulerAppointment<TestModel> { Title = "Test 2", Start = DateTime.Now.AddHours(1), End = DateTime.Now.AddHours(2), IsAllDay = false, Model =  new TestModel("blah") },
             new SchedulerAppointment<TestModel> { Title = "Test 3", Start = DateTime.Now, End = DateTime.Now, IsAllDay = true, Model =  new TestModel("blah") }
        };
    }

    public SchedulerAppointment<TestModel> ModelInitHandler()
    {
        return new SchedulerAppointment<TestModel>("blah");
    }
}

SchedulerAppointment.cs:

namespace TelerikBlazorTestApp.Models
{
    public class SchedulerAppointment<TItem>
    {
        public Guid Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public List<DateTime> RecurrenceExceptions { get; set; }
        public Guid? RecurrenceId { get; set; }

        public TItem Model { get; set; }

        public SchedulerAppointment()
        {
            Id = Guid.NewGuid();
        }

        public SchedulerAppointment(string s)
        {
            Id = Guid.NewGuid();
            Model = (TItem)Activator.CreateInstance(typeof(TItem), s);
        }
    }
}

namespace TelerikBlazorTestApp.Models
{
    public class TestModel
    {
        public string PropA { get; set; }
        public string PropB { get; set; }

        public TestModel(string s)
        {
            // something using s here
        }
    }
}

Thanks!

Hi, 

During grid initialization I have duplicate OnReadMethod call. I dynmaically set LoadGroupsOnDemand parameter. When LoadGroupsOnDemand  is false and when I skip the second call (I shouldn't do any extra logic to calculate the call number anyway) it works fine. If LoadGroupsOnDemand is true I have to call it twice. With early ending of first call, second OnRender call won't be done. If I do "return" at the begining of second call it returns me an empty grid. 

Similar issue to this one: https://feedback.telerik.com/blazor/1442276-onread-called-twice-on-initialization

What is the plan for docking control or  docking manager?

Hi,

This kind of behavior causes duplicate OnRead calls for the same range. If the OnRead method invokes a request to the API it will result in duplicate requests with the same range.

When I select value that is right after first range I cannot scroll back to the previous range again due to a mechanism that makse scroling near to the selected value harder.