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"

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

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

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.

Here are some details on the issue I am referring to:

• The problem only occurs when there is at least one item selected.
• If the focus is on the chip/selected item, you can properly navigate back to the previous input with Shift+Tab.
• If the focus is on the input, though, then you cannot use Shift+Tab to navigate back to the previous input/focusable element.

Reproduction: https://blazorrepl.telerik.com/GJkdbBvJ44uuG3fF40.

The View Details tool of the FileManager throws a NullReferenceException when a file is selected. Folders do not trigger the error.

Affected versions as of writing this:

• 8.1.0
• 8.1.1
• 9.0.0

The Grid component creates an invalid property value in its style for the <table> tag like shown below (some of the contents omitted for brevity). Notice the "width: ;" which should have a value in it.

<table style="height: auto; width: ;"></table>

This can be observed for example by creating a page with the below code and the using the browsers developer tools to examine the elements. Both Grids will have their CSS width property be invalid.

<TelerikGrid Data="@data" AutoGenerateColumns="true">
</TelerikGrid>

<TelerikGrid Width="200px" Data="@data" AutoGenerateColumns="true">
</TelerikGrid>

@code {
    private List<Product> data = new () { 
        new Product() {
            Id = 2,
            Name = "Hello product"
        }    
    };

 public class Product {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

I have a splitter pane with 3 panels. If you resize the left panels (drag it back and forth), then the right panels incrementally increases in size. Similarly with anything more than 2 panels.

https://blazorrepl.telerik.com/GpOKaRFn37OSfEyp53

Grab any of the left splitters and drag them back and forth quickly. You will see the right panels increasing in size.

The problem occurs in Google Chrome when the pane Size is set in percent.

Description

Adaptive Toolbar buttons do not appear in the overflow popups when expected.

Steps To Reproduce

https://demos.telerik.com/blazor-ui/toolbar/adaptive

https://blazorrepl.telerik.com/mTuAEzPe41y4e7y637

Use the slider to reduce the witdh of the toolbars

Actual Behavior

Visible buttons that disappear from the toolbar do not appear in the two popups.

Expected Behavior

Visible buttons that disappear from the toolbar should appear in the overflow popup.

Browser

All

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

8.1.1

Description

When new data is loaded in the Breadcrumb, if at that moment some of the old items are hidden (because the browser window is too narrow), once the component visualizes the new data, the last item remains hidden.

Workaround
Add the following CSS to the page:

<style>
    .k-breadcrumb-last-item  {
        display: inline-block !important;
    }

    .k-breadcrumb-last-item .k-breadcrumb-link {
        display: inline-flex !important;
    }
</style>

Steps To Reproduce

1. Run this REPL example: https://blazorrepl.telerik.com/QTEqFvve37kGQ8C743
2. Ensure that the right pane is not too wide, in order for some of the Breadcrumb items to remain collapsed.
3. Click the button above the Breadcrumb. New data that contains 2 items is loaded in the component.

Actual Behavior

The Breadcrumb's last item ("Breadcrumb B 2") is hidden.

Another issue reproducible after loading more than 2 items in the Button's click handler is the Breadcrumb begins to flicker on pane (browser window) resize. The flickering is caused by items showing/hiding almost at the same time.

Expected Behavior

The behavior should remain as it is on initial load. The first and last items should always be visible.

No flickering should occur and there should be a smooth transition between hiding and showing an item.

Browser

All

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

No response

Hello:

I am using column menu in a gantt component. In version 8.1.1 the selection of columns to display was working correctly, but when upgrading to version 9.0.0 I get an error using the same implementation. The error received is:

blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenu`1.<OnColumnChooserColumnVisibilityChange>d__188[[BlazorRepl.UserComponents.__Main.FlatModel, BlazorRepl.UserComponents, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenuChooser.OnApplyClick()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

You can replicate the error from online examples just by adding or removing visible columns.
https://www.telerik.com/blazor-ui/documentation/components/gantt/gantt-tree/columns/menu

I need to use this functionality with Telerik® UI for Blazor version 9.0.0.

When is it planned to solve this error? Is there a workaround I can apply?

Regards.

The Expand/Collapse icon of the PivotGrid is always a font one. I am using SVG icons in my app and I don't see the any icon in the toggle button.

===

ADMIN EDIT

===

A workaround for the time being is to register the Font icons stylesheet even if you are using SVG icons.

Form validation triggers unexpectedly and too early when:

• The Value is nullable.
• ValidateOn is set to Change.
• The user inputs a minus sign in an empty NumericTextBox.

Test page: https://blazorrepl.telerik.com/mzOUOolG385hImjN13

If the Grid has no data, selecting null PageSize throws:

Error: System.ArgumentException: Page Size cannot be less than one (Parameter 'PageSize') 

---

ADMIN EDIT

---

A possible workaround for the time being will be to use some conditional CSS to disable the PageSize dropdown while there is no data in the Grid: https://blazorrepl.telerik.com/QcOpkTlb38EDFboT34.