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

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."

I need to be able to allow our users to tab into the dropdownlist control and open it with enter (similar to standard HTML select).

Here is also a sample from the W3 documentation to compare against: DropDownList keyboard support.

In <TelerikTimePicker>, how can I enable format in the dropdown for minutes in two digits like 01, 02, 03, 04? Currently, I found these formats for Blazor Timepicker - https://demos.telerik.com/blazor-ui/timepicker/formats. All formats are showing single-digit minutes like 1, 2, 3, and 4.

I want to set the format in the dropdown for minutes to be two digits. Same as here https://demos.telerik.com/aspnet-mvc/timepicker/component-type.

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

I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.

This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.

=====

TELERIK EDIT / TLDR

The desired behavior violates accessibility standards. That's why we will refrain from implementing it as a built-in feature. We suggest the following workaround that is now part of the documentation: Select focused ComboBox item on tab

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