The issue targets a Grid with cell selection and DragToSelect feature disabled where at least one column has Visible="false". With this configuration, when using Shift + Click to select multiple cells, the result is a mismatch in the cells that should be selected, after the position where the invisible column is placed.

Video reproduction attached. Reproduction code: https://blazorrepl.telerik.com/GyFuQwPf37H8riAM19.

Hello,

I am experiencing a crash when trying to remove a FilterField from a TelerikFilter component when using it inside a TelerikDialog. From what I understand, the documentation for the TelerikFilter is out of date ('TelerikFilter.ValueChanged' is obsolete: 'Use OnUpdate instead.') so I did my best trying to put the piece together.

The TelerikFilter code is based on the updated Telerik sample provided here: 'TelerikFilter.ValueChanged' is obsolete: 'Use OnUpdate instead.' but updated based on the documentation for "Filter in a Dialog" provided here: Blazor Dialog Integration - Telerik UI for Blazor

Here is my code:

 <TelerikDialog @ref="@DialogRef" Visible="@ShowDialog" Width="600px" Title="My Dialog" VisibleChanged="@WindowVisibilityChangeHandler">
     <DialogContent>
         <TelerikFilter Value="@Value" OnUpdate="@((value) => OnFilterUpdate(value))">
             <FilterFields>
                 <FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
                 <FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
                 <FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
             </FilterFields>
         </TelerikFilter>
   </DialogContent>
   <DialogButtons>
    <TelerikButton OnClick="@(() => ResetDialogState())">Cancel</TelerikButton>
    <TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="@(() => PrimaryAction())">Confirm</TelerikButton>
</DialogButtons>
</TelerikDialog>

@code {
private CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();

private void OnFilterUpdate(object filter)
{
    if (filter is null)
    {
        return;
    }
    Value = (CompositeFilterDescriptor)filter;
    DialogRef.Refresh();
}

public class Person
{
    public int EmployeeId { get; set; }
    public string Name { get; set; } = string.Empty;
    public int AgeInYears { get; set; }
}
}

The TelerikFilter renders fine and I can add Filters by clicking the "Add Expression" button. However, when I try to remove a filter that was added, I click on the X button on the right. The first time, nothing happens. When I click a second time, I get this error:

 Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
      System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
         at System.Collections.ObjectModel.Collection`1.RemoveAt(Int32 index)
         at Telerik.Blazor.Components.Filter.FilterGroup.OnFilterRemove(Int32 index, String removedFilterId)
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I also have attached a video of the issue to this ticket.

Is this a bug? If not, can you point me in the right direction?
Thanks,

Mathieu

This currently happening in both my application, and in some of your demos.  If you set the focus to one of the tabs in the tabstrip, and then hit the tab key on the keyboard, it should set focus to the tabstrip content itself.  However, in some cases it sets the focus right back to the tab, so you can never navigate off of the tab with the keyboard.  

An example of this can be seen in the Overview and Scrollable Tabs demos, but it is working in position and alignment demo.  I should also note that if I open the Overview and Scrollable demos in the Repl, it also works.  So I'm not sure what is preventing it on the demo pages themselves.  Any help would be appreciated, since the same thing is happening in my projects after I upgraded the Telerik controls to v9.x.  Here are the demo links that I'm referring to.

https://demos.telerik.com/blazor-ui/tabstrip/overview

https://demos.telerik.com/blazor-ui/tabstrip/scrollable-tabs

When copy-pasting a cell from Excel to the Spreadsheet, our component then generates an invalid horizontal alignment value, which does not conform to the document format specification:

<alignment horizontal="start" vertical="bottom" />

The valid values for horizontal do not include start: 

<simpleType name="ST_HorizontalAlignment">
	<restriction base="xsd:string">
	<enumeration value="general"/>
	<enumeration value="left"/>
	<enumeration value="center"/>
	<enumeration value="right"/>
	<enumeration value="fill"/>
	<enumeration value="justify"/>
	<enumeration value="centerContinuous"/>
	<enumeration value="distributed"/>
	</restriction>
</simpleType>

Here are the steps:

1. Copy some basic content from Excel (two text cells)

2. Paste the content to the Telerik Blazor Spreadsheet component and save the XLSX file

---

ADMIN EDIT

Screen recording attached below, code to reproduce  it too.

---

The appointment drag and drop functionality of the Scheduler does not work on mobile devices. When you try to drag an item, the item does not move.

You can test it by running the Scheduler overview demo by using Chrome's mobile device emulator and trying to drag and drop an appointment.

Description

Entering/Removing spaces in between words does not trigger the ValueChanged event.

Steps To Reproduce

Run this example: https://blazorrepl.telerik.com/wzELPuOs30WSuvzv33

1. Click between the "Lorem" and "ipsum" words.
2. Press the Spacebar key a few times
3. Press the Backspace key a few times

Actual Behavior

The ValueChanged event does not fire when you enter/remove spaces in between words. It fires correctly if you break a word with a space of if you remove all the spaces in between 2 words.

Expected Behavior

ValueChanged should fire on every entered/removed space.

Browser

All

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

No response

Pressing Shift+Tab initially when the Window is opened, moves the focus from the Window back to the Button that opens it.

Steps To Reproduce:

1. Open REPL repro
2. Click "Open Modal" Button
3. Press "Shift+Tab"

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()

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.

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.

The focus indicator on the GridSearchBox is broken when using an outline themes like A11Y, Bootstrap etc.

Workaround:

Temporarily override the overflow style on .k-toolbar-items (e.g., overflow: unset;) using custom CSS to restore the focus indicator.

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'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

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