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 OnPaneResize (and SizeChanged) event does NOT fire when a pane is unpinned. When it flies out from the left, resizing the flyout does not fire events that would letus refresh the chart to fill the new size.

Reproduced in this REPL:  https://blazorrepl.telerik.com/mfkqODwk35srscZe46

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.

If you are zooming a page containing a DateTimePicker with "AdaptiveMode" set to "AdaptiveMode.Auto", the application crashes occasionally with the error:

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')

The more adaptive DateTimePicker instances the page contains, the more likely the error is to occur.

Hi,

I'm using two TelerikListBox elements, one left, one right. The right ones Data attribute is bound to already selected items that I get from the DB through EF Core. As you know, EF Core makes use of navigation properties. As you probably also know, the TelerikListBox recursively copies elements on binding. This causes a documented StackOverflowException, as written here -> https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-stackoverflowexception-editing-circular-references.

I fixed the issue by calling 

.Select(x => x.RemoveNavigation())

before binding, with RemoveNavigation being a simple "NavigationProp = null; return this;" function.

Eventhough this works, I think

a) the documented solution is not great, because the navigation properties are very useful, are one of the big reasons to even use EF Core in the first place and are automatically generated by, for example, EF Core Power Tools. Expecting the users to remove them from affected models is not a viable long term solution.

b) it would be better for Telerik to fix the issue by implementing some kind of logic to prevent the issue alltogether. My suggestion would be to ignore virtual, non-collection object properties on copy. 

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

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.

---

ADMIN EDIT

Here is one workaround you can consider:

https://blazorrepl.telerik.com/QoOAPyEZ233YP2AX19

@inject IJSRuntime js

@* Move this script to a separate JS file *@
<script suppress-error="BL9992">
    function getHighligtedComboItem() {
        // Get the currently focused item in this particular ComboBox.
        var focusedItem = document.querySelector(".select-on-tab .k-list-item.k-focus");
        if (focusedItem) {
            return focusedItem.innerText;
        }
    }
</script>

<p>FirstFilteredItem: @FirstFilteredItem</p>

<p>Selected value: @ComboBoxValue</p>

<span onkeyup="@GetFirstFilteredItem">
    <TelerikComboBox Data="@ComboBoxData"
                     Value="@ComboBoxValue"
                     ValueChanged="@( (int newValue) => ComboBoxValueChanged(newValue) )"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Value)"
                     Filterable="true"
                     FilterOperator="@StringFilterOperator.Contains"
                     OnBlur="@SelectItemOnTab"
                     OnOpen="@( () => IsComboBoxOpen = true )"
                     OnClose="@( () => IsComboBoxOpen = false )"
                     Placeholder="Select an item..."
                     ClearButton="true"
                     Width="200px">
        <ComboBoxSettings>
            <ComboBoxPopupSettings Class="select-on-tab" />
        </ComboBoxSettings>
    </TelerikComboBox>
</span>

<input placeholder="another form element" />

@code {
    private IEnumerable<ListItem> ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });

    private int ComboBoxValue { get; set; }

    private string FirstFilteredItem { get; set; } = string.Empty;

    private bool IsComboBoxOpen { get; set; }

    private async Task GetFirstFilteredItem(KeyboardEventArgs args)
    {
        if (!IsComboBoxOpen)
        {
            // Wait at least 300ms, which is the opening animation.
            await Task.Delay(400);
        }
        else
        {
            // Wait, depending on the typical filtering time.
            await Task.Delay(300);
        }

        // The code that will find the item text depends on the exact scenario and potential use of ItemTemplate.
        FirstFilteredItem = await js.InvokeAsync<string>("getHighligtedComboItem");
    }

    private void SelectItemOnTab()
    {
        if (!string.IsNullOrEmpty(FirstFilteredItem))
        {
            // Match the filter operation to the filter operator of the ComboBox.
            var matchingItem = ComboBoxData.Where(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
            {
                ComboBoxValue = matchingItem.Value;
                FirstFilteredItem = string.Empty;
            }
        }
    }

    private void ComboBoxValueChanged(int newValue)
    {
        ComboBoxValue = newValue;
        FirstFilteredItem = string.Empty;
    }

    public class ListItem
    {
        public int Value { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

Steps to reproduce the behavior:

1. Create Blazor WebApp Net 8 6.2.0 project
2. Upgrade project to 7.1.0 version
3. On the Upgrade wizard validation step, see the error:

An error occurred while running the wizard.

Error executing custom action Telerik.Blazor.VSX.Actions.MultiProjectUpdateMasterPageAction: System.InvalidOperationException: Sequence contains no matching element
   at System.Linq.Enumerable.First[TSource](IEnumerable`1 source, Func`2 predicate)
   at Telerik.Blazor.VSX.Actions.AdvancedUpdateMasterPageAction.RetrieveMasterPageSettingsUpgradeInfo(IPropertyDataDictionary arguments, IProjectWrap project)
   at Telerik.Blazor.VSX.Actions.UpdateMasterPageAction.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap projectWrap)
   at Telerik.VSX.Actions.ProjectActionBase.Telerik.VSX.Actions.IProjectAction.Execute(IWizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap projectWrap)
   at Telerik.VSX.Actions.MultiProjectActionBase`1.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments)
   at Telerik.VSX.WizardEngine.Actions.ActionBase.Telerik.WizardFramework.IAction.Execute(IWizardContext wizardContext, IPropertyDataDictionary arguments)
   at Telerik.VSX.WizardEngine.ActionManager.ExecActions()

Description

TimePicker bound to a non-nullable DateTime property. User input is marked as invalid, when they change only part of the default TimePicker value.

Steps To Reproduce

1. Run the following REPL example: https://blazorrepl.telerik.com/GpEUOflI50gehA9B54
2. Focus the hour part of the input and type in a number, e.g., 3
3. Blur the TimePicker

Actual Behavior

On beginning to type, the k-invalid class is applied to the TimePicker element. When the use clicks away, the current input value (e.g., 3:00 AM) is replaced with the default value (12:00 AM).

If you type the whole value (e.g., 3:45 AM) and then click away from the component, the k-invalid class is removed and the value is accepted as valid.

Expected Behavior

The k-invalid class should not be applied to the TimePicker in the scenario described above. The used should be able to change only the hour part of the value, or the minutes, without having to type in the whole value.

Browser

All

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

8.1.1