Grid OnRead .Clear() Issue

With the following component:

@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; } = new List<SampleData>();
    //public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
    private int page = 1;

    private void ReadItems(GridReadEventArgs args)
    {
        //MyData = new List<SampleData>();  //OK!
        //MyData = new ObservableCollection<SampleData>(); //OK!
        MyData.Clear();  //List: No update. ObservableCollection: System.StackOverflowException!
        Populate();
        StateHasChanged();
    }

    private void Populate()
    {
        foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        }))
        {
            MyData.Add(data);
        }
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

I see the issues in the comment fields.  Changing OnRead to async makes no difference.  

The workaround is to assign a new List or ObservableCollection instead of using .Clear()

Since <TelerikGrid> is implemented as two separate <table>s, one for the headers and a second for the grid, it does not show repeated headers on subsequent pages when using the browser's Print feature. 

Due to limitations of the <TelerikGrid> export functionality, I use the browser print function to export PDFs.

I need the table headers to duplicate on subsequent printed and exported pages. 

I wonder if there is a way to duplicate the <thead> info in the second table and suppress its display but enable it for @media Print.

More details in ticket 1691848

The input in the DateTimePicker is valid when:

- the DateTimePicker value is bound to nullable DateTime and

- the user clears the input

In such cases, the input field shouldn't get a red border.

Here is a REPL example to reproduce the issue:

1. Select a date.
2. Clear the date. The input gets a red border.

===ADMIN EDIT===

A possible workaround is to change the border color with CSS. Here is a REPL example.

I'm using the Menu component and I am handling the OnClick event. I noticed that when an exception is thrown in its handler, it does not reach the ErrorBoundary.

===

ADMIN EDIT

===

This issue also affects the SplitButton component.

I've noticed this warning is now shown since version 9.0.0. I checked the release notes and don't see any notes reflecting this change. I also checked the documentation and don't see any information about the OnUpdate event. Can we please update the documentation to document the changes? I would like to understand the behavior of OnUpdate so I can move away from ValueChanged.

"warning CS0618: 'TelerikFilter.ValueChanged' is obsolete: 'Use OnUpdate instead.'"

Blazor Filter Events - Telerik UI for Blazor

In our application we use some large datasets and present them in a TelerikGrid. We use WPF + Blazor Hybrid and noticed, that in some cases the memory usage of the Web View process grows up to some gigabytes.

Here a screenshot of the task manager with a lot of RAM usage for the web view.

Here a screenshot of the detached DOM elements after a two navigations. The container divs are not garbage collected.

I tracked down the issue to come from the TelerikGrid, because when I remove it from the pages, everything runs fine. I also removed all GridColumns and the issue is still present. In the developer tools I noticed that one of the parent div elements remains in memory every time I navigate back and forth.

I also created a blank Blazor WebAssembly Standalone application and added a simple instance of the grid. Here, the issue is also present. I attach the one blazor page that causes the issue.

I've tested all major versions from 5.1 upwards, every version is affected.

Refreshing the Grid data frequently may cause performance issues.

Improve the component's memory management, related to calling the .Rebind() method. 

Hi Telerik Team!

We’ve noticed that your official website uses anchor scrolling (clicking on links to scroll to specific sections smoothly), and we’d love to see that as a Telerik Blazor component.

This would be super useful in scenarios where:

• The only way to present content is via long scrollable pages

• Tabs aren’t a good UX fit

What we’re looking for:

-Smooth scrolling to internal page anchors (sections)

-Scrollspy-like feature to highlight active section

-Optional scroll offset for sticky headers

-Lightweight, flexible integration (with or without Telerik Form/Layout components)

We feel this would be a great addition to the Telerik Blazor suite — especially for documentation-style pages, long forms, or configuration panels.

Thanks a lot and keep up the awesome work!

Best regards,
Bohdan

Hello,

I created a repl to replicate the issue that I'm having. I created a Filter with a custom editor. For this example, I used a Textbox and I save the changes back to the context.FilterDescriptor.Value in the OnChange method which occurs when the user blurs focus.

If you start the repl w/o checking the Use Custom Editor checkbox and enter text where the "Sample" value is located you will see the changes are saved properly to the bound CompositeFilter property and are echo'd back in the screen.

If instead you check the Use Custom Editor box and perform the same test you'll see that the same changes are not present in the bound CompositeFilter. 

Note that this issue only occurs if you start with an existing CompositeFilter and bind it to the filter control. It seems that if the control creates the FilterDescriptor objects then their changes bind properly, but if the FilterDescriptor objects existed before binding to the control then the issue occurs.

https://blazorrepl.telerik.com/wIOtcKOb31mjTc3351

Thank You,

-Andy

============= TELERIK EDIT ===============

A possible workaround is to find the original filter descriptor and update its Value:

@using Telerik.DataSource

@System.Text.Json.JsonSerializer.Serialize(FilterValue)

<br />
<br />

<TelerikFilter @bind-Value="@FilterValue">
    <FilterFields>
        <FilterField Name="Field" Type="@(typeof(string))">
            <ValueTemplate>
                <TelerikTextBox Value="@((string)context.FilterDescriptor.Value)"
                                ValueChanged="@( (string newValue) => OnTextBoxValueChanged(context.FilterDescriptor, newValue) )"
                                DebounceDelay="0" />
            </ValueTemplate>
        </FilterField>
    </FilterFields>
</TelerikFilter>

@code {
    private void OnTextBoxValueChanged(FilterDescriptor templateFD, string newValue)
    {
        var originalFD = FilterValue.FilterDescriptors.OfType<FilterDescriptor>().FirstOrDefault(x =>
        {
            return x.Member == templateFD.Member &&
                x.MemberType == templateFD.MemberType &&
                x.Operator == templateFD.Operator &&
                x.Value == templateFD.Value;
        });

        if (originalFD != null)
        {
            templateFD.Value = newValue;
            originalFD.Value = newValue;
        }
    }

    private CompositeFilterDescriptor FilterValue { get; set; } = new()
    {
        LogicalOperator = FilterCompositionLogicalOperator.Or,
        FilterDescriptors = new FilterDescriptorCollection() {
             new FilterDescriptor()
            {
                Member = "Field",
                MemberType = typeof(string),
                Value = "Sample"
            }
         }
    };
}

Hi - this one is a feature request, not a bug. :)

For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."

The following date in the Scheduler RecurrenceRule cannot be parsed and is ignored:

RecurrenceRule = "FREQ=DAILY;UNTIL=20210722T000000"

According to the RFC5545 specification, this should be a valid date format.

These formats will work:

RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00"

RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00.000Z"

EDIT:

private string TransformRecurrenceRule()
        {
            const string untilSeparator = "UNTIL=";
            var ruleParts = RecurrenceRule.Split(untilSeparator, StringSplitOptions.RemoveEmptyEntries);
            if (ruleParts.Length <= 1)
            {
                // There was no Until clause to worry about
                return RecurrenceRule;
            }

            // Save the first part of the rule
            var ruleBeginning = ruleParts[0];

            // Split the date part of the until clause from any following clauses
            var remainingClauses = ruleParts[1].Split(';', 2, StringSplitOptions.RemoveEmptyEntries);

            //Save the date part of the until clause
            var untilDate = remainingClauses[0];

            // Save any following clauses with the `;` replaced
            var ruleEnding = "";
            if (remainingClauses.Length == 2)
            {
                ruleEnding = $";{remainingClauses[1]}";

            }

            // Convert the until date into .net parsable format
            const string format = "yyyyMMddTHHmmss";
            var date = DateTime.ParseExact(untilDate, format, CultureInfo.InvariantCulture);
            var dateStr = date.ToString("yyyy-MM-ddTHH:mm:ss");

            // recombine rule components
            var newRuleParts = new[] {ruleBeginning, untilSeparator, dateStr, ruleEnding};
            var newRule = string.Join("",newRuleParts);

            return newRule;
        }

The NumericTextBox does not render the new Value that is set in ValueChanged if this new value is different than the event argument. Instead, the component clears the textbox, even though the component Value parameter is correct.

https://blazorrepl.telerik.com/wzaAHYas221go9xd48

The problem occurs only if there is an existing value and the user removes it with Backspace.