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.

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"
            }
         }
    };
}

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

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.

When the user opens the DateTimePicker(Time step) or the TimePicker, which are bound to some value, and clicks directly the "Set" button, the pickers don't bind the displayed time value (pre-selected value). This behavior can be seen when the pickers have configured steps (e.g. Minute: "15", Year="10" etc.)

Steps To Reproduce

1. Open link - https://blazorrepl.telerik.com/GyupQQFv05vNPskh51
2. Open the TimePicker
3. Click the "Set" button, to set the pre-selected value

Description

File data is not available in the Upload's OnSuccess event.

Regression in version 9.0.0 introduced with the addition of the chunk upload functionality.

https://github.com/telerik/blazor/blob/master/js/telerik-blazor/src/upload/upload.ts#L282-L288

Steps To Reproduce

1. Attach a handler to the OnSuccess event:

<TelerikUpload SaveUrl="/api/upload/save"
               RemoveUrl="/api/upload/remove"
               OnSuccess="@OnSuccessHandler" />

@code {
    async Task OnSuccessHandler(UploadSuccessEventArgs e)
    {
        foreach (var file in e.Files)
        {
            Console.WriteLine($"Name = {file.Name}, Size = {file.Size}, Extension = {file.Extension}");
        }

        StateHasChanged();
    }
}

2. Upload a file and try to access its Name, Size, and Extension properties in the event handler.

Actual Behavior

The properties have their default values (null for Name and Extension and 0 for Size).

Expected Behavior

The actual file data is accessible in the OnSuccess event handler.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

8.1.1

When enabling resizing and reordering for the Telerik Grid, using `MinResizableWidth` to set minimal column width will apply the constraint to the column position rather than the actual movable column. This means applying a min width of 200px to the first column will work as expected until the column is moved to another position. Now the column in question no longer has the min width applied, and the column that has moved into the first position has the 200px min width constraint. 

It appears this is due to the constraint being applied to the `data-col-index` rather than the `data-col-initialization-index`, or something to that effect.

The following example has a 200px min-width constraint applied to the "Name" first column, and no custom min-with applied to "Address" second column. Switching the columns by moving the "Name" after the "Address" will apply the constraint to the "Address" and not the "Name".

https://blazorrepl.telerik.com/QJEAcuPE41L7Uhiw44

Currently using 7.1.0 but looks to be an issue in later versions as shown by the REPL example. Tested in Firefox and Chrome.

The column position is arbitrary and the bug isn't due to the constraint being applied to the 0 column, applying the constrain to all even columns then shuffling would result in the constrain still being applied to all even columns.

Description

A pane that has Closeable="false" set does not render a "close" button and should not be closeable through any user interaction. However, pressing the Esc keyboard key (while the pane is floating and has the focus) closes the pane.

Steps To Reproduce

Run the following REPL example: https://blazorrepl.telerik.com/QTkgmKuM23c0uPv125

1. Focus the floating pane.
2. Press the Esc keyboard key.

A slightly different scenario: there are no panes declared in a DockManagerFloatingPanes tag. The user drags a DockManagerContentPane making it float, then presses Esc key: https://blazorrepl.telerik.com/QJuUGUlv43toAJhk40

Actual Behavior

The floating pane closes.

Expected Behavior

The floating pane remains open.

Workaround:
Add the following script to the view:

<script suppress-error="BL9992">
    document.addEventListener(
      "keydown",
      function (e) {
        if (e.key === "Escape" && e.target.classList.contains("k-dock-manager-window")) {
          e.stopImmediatePropagation();
          e.preventDefault();
        }
      },
      true
    );
</script>

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

The TimePicker TimeView resets the date portion of the component Value to today. This does not happen when typing in the DateInput.

The problem is with start-end validation where the start Value gets ahead of the end Value, even if the time parts are valid.

A possible workaround is to use the TimePicker ValueChanged event to override the date part to its previous value, or to set a fixed date value that is the same for the start and end TimePickers.

I have been having issues adding the month view to a Telerik Blazor scheduler component, when there is grouping. It gives a null reference error any time I try to switch to the month view. I also tried it using the available demo for grouping in Telerik REPL, the only difference I found between my code and the demo was that I had used the ItemsPerSlot parameter.  I added this to the demo, and was able to reproduce the error I was seeing, and I have attached the console output from the REPL demo. I believe there is either a bug with the ItemsPerSlot being used in conjunction with grouping on a scheduler component, or some instruction missing from how to set it up properly to prevent this null reference issue. 

Changed code:

<SchedulerMonthView ItemsPerSlot="5"></SchedulerMonthView>

Demo used:

Blazor Scheduler (Event Calendar) Demos - Grouping | Telerik UI for Blazor

The scenario is:

• Grid popup editing
• The model class has no parameterless constructor
• The Grid is using a popup <FormTemplate>

In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.

A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.

The application can trigger edit mode through the Gantt state, similar to the how you can trigger edit mode programmatically in the Grid. However, in this case, the Gantt edit form does not show the tabs for editing dependencies and custom model properties.

Test page with a possible JavaScript-based workaround (it requires the item to edit to be rendered:

https://blazorrepl.telerik.com/cpOKmIuC29Unl2B429

lm applying class like this :

<TelerikToolBar>
            <ToolBarButton Class="my-custom-class" ...  />
            <ToolBarTemplateItem Class="my-custom-class">
...
            </ToolBarTemplateItem>
</TelerikToolBar>

But the resulting div for the ToolBarITemplateItem does not get class applied to it.

=====ADMIN EDIT=====

A possible workaround for the time being is to use different CSS selectors in order to style the specific elements:

<style>
    .second-template-item {
        border: solid;
        border-color: limegreen;
    }

    .my-group button:nth-child(1) {
        border: solid;
        border-color: red;
    }

    .my-group button:nth-child(3) {
        border: solid;
        border-color: blue;
    }
</style>

<TelerikToolBar>
    <ToolBarButtonGroup Class="my-group">
        <ToolBarButton>Bold</ToolBarButton>
        <ToolBarButton>Italic</ToolBarButton>
        <ToolBarButton>Underline</ToolBarButton>
    </ToolBarButtonGroup>
    <ToolBarSeparator />
    <ToolBarTemplateItem>
        <TelerikDropDownList Data="@Roles" @bind-Value="@SelectedRole" />
    </ToolBarTemplateItem>
    <ToolBarTemplateItem>
        <TelerikDropDownList Class="second-template-item" Data="@Roles" @bind-Value="@SelectedRole" />
    </ToolBarTemplateItem>
</TelerikToolBar>

@code {
    public string SelectedRole { get; set; }

    public List<string> Roles { get; set; } = new List<string>()
    {
         "Manager", "QA", "Developer", "Support"
    };

    protected override void OnInitialized()
    {
        SelectedRole = Roles.FirstOrDefault();
    }
}

When attempting to utilize the FilterMenuButtonsTemplate component, after selecting any of the defined action buttons (i.e., Clear, Filter, etc.), the selection will cause the page to refresh.

Steps:

1. Proceed to the Telerik Blazor documentation page for Filter Menu Buttons Template within the Grid component.
2. View the example for Using custom filter menu buttons.
3. Ensure that this is the first time loading the component as the error will only occur on the example page when first initialized.
4. Select the filter button within the “Price” column header.
5. Press the “Clear” button.

When the OverflowMode of a Toolbar is set to ToolBarOverflowMode.None, changing a tool’s parameters programmatically can cause overflowed tools to disappear.

Reproduction example: https://blazorrepl.telerik.com/mzYKQEYM23bGXmvN56

In the meantime, a possible alternative is to use Adaptive="false" instead OverflowMode="ToolBarOverflowMode.None"

Description

The arrow buttons in the Map's navigator and the zoom buttons render without type="button" attribute.

Steps To Reproduce

Inspect the navigator and zoom buttons in this demo: https://demos.telerik.com/blazor-ui/map/overview

Actual Behavior

The buttons render without the type attribute.

Expected Behavior

The buttons render with type="button" attribute.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response