This REPL test page is based on the TreeView Filtering demo, but with added checkboxes.

1. Check an item.
2. Filter the TreeView data, so that the checked item is no longer present.
3. Try to check another item.
4. The TreeView will throw a NullReferenceException.

A possible workaround is to also filter (or clear) the collection that is bound to the CheckedItems parameter of the TreeView.

I generated a new project using the Telerik Blazor Template for server side.

In the _Host.cshtml file on line 27 it generates the following:

<a href class="reload">Reload</a>

Should be

<a href="" class="reload">Reload</a>

Have a nice day.

Peter

Consider a scenario with two Windows. The first one is centered. Users open a second Window from the first one, and the second Window gains focus.

At this point, if the user clicks on the titlebar of the first Window, it will lose its centered position and move to the corner of the screen.

Here is a REPL test page: https://blazorrepl.telerik.com/wSOMEtEL55Ddk4v441

A possible workaround is to set explicit Width, Height, Top and Left values to the first Window, so that it's not centered, but appears to be: https://blazorrepl.telerik.com/QeaWuNus07TfnCz731

We have the following scenario:

• a dialog that contains a TreeView
• the TreeView is not expanded, when the dialog is opened, only the root node is displayed
• the children are loaded on demand, when the parent node is expanded
• there is a public async Task LoadChildrenAsync() that loads the children from the source
• the loading operation might take a few seconds

The problem is when you close the dialog before the loading is finished, a NullReferenceException occurs.

System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.Common.Trees.TelerikTreeDataSource.GetTreeItems(IEnumerable`1 data, Int32 level, String parentIndex)

I am using Grid with Cell Selection enabled and DragToSelect="true". If I define a Template inside the GridColumn tag and I add a div inside that, SelectedCellsChanged event handler does not trigger if I start dragging by clicking on the div or if I drop inside that one.

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

===

ADMIN EDIT

===

The only workaround for the time being is to disable the drag selection and let the user only select cells by clicking them. The cells will be selected even if the user clicks on the custom <div> element inside the template.

The TileLayout should not render tabindex="0" on its tiles when Navigable="false".

Here is a test page with a workaround:

@inject IJSRuntime js

<p>Tab through the textboxes:</p>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="false"
                   Class="tilelayout-tabindex-remove">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="false" - will focus the inner textbox and will not focus the tiles.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="true" - will not focus the inner textbox and will focus the tiles. Focus the textbox with Enter when on the tile.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<script suppress-error="BL9992">

    function removeTabindexFromTiles(selector) {
        var tileLayout = document.querySelector(selector);

        if (!tileLayout) {
            return;
        }

        tileLayout.querySelectorAll(".k-tilelayout-item").forEach(el => {
            el.removeAttribute("tabIndex");
        });
    }

</script>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // ensure HTML is ready
            await js.InvokeVoidAsync("removeTabindexFromTiles", ".tilelayout-tabindex-remove");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

The OnBlur event does not fire after removing an item wehn using TagMode="@MultiSelectTagMode.Single"

I used this snippet in the Blazor REPL to reproduce the issue:

<p>@OnBlurMessage</p>
<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@SelectedCountries"
                    TagMode="@MultiSelectTagMode.Single"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" 
                    ClearButton="true"
                    AutoClose="false"
                    OnBlur="OnBlurHandler">
</TelerikMultiSelect>

@code {
    private List<string> Countries { get; set; } = new List<string>();

    private List<string> SelectedCountries { get; set; } = new List<string>();
    string OnBlurMessage {get; set;} = "";
    int i;

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");
        base.OnInitialized();
    }

    void OnBlurHandler()
    {
        OnBlurMessage = $"OnBlurHandler touched {++i} times";
    }
}

Steps to reproduce:

1. Select an item from the list then click out of the control.  Note that the comments shows "OnBlurHandler touched 1 times".
2. Click the x for the "1 item(s) selected" tag then click outside of the control.  Note that the comment still shows "OnBlurHander touched 1 times".
3. Click into the control then outside of control.  Note that the comment is updated to show "OnBlurHandler touched 2 times".

The OnBlur event should fire after step 2.

Attached is a short video clip of what I see.

If the editor's HTML markup contains inline CSS styles, and a CSS attribute value includes a semicolon (;), it breaks the applied styles and throws an exception.

For example:

<p style= "" ....background-image: url('data:image/png;base64...;""</p>

The exception is:

Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

=== ADMIN EDIT ===

The issue can also occur when there is an invalid inline style with two semicolons without a complete style-value pair in-between.

For example:

<p style=""color:red; b ;"">sdf</p>

Check the following configuration: https://blazorrepl.telerik.com/cHvuPOYX27peykXr18 ( SlotDuration="720"  SlotDivisions="1").

The start time of the appointment is 12:00 PM today. The Scheduler, however, displays the start at 12:00 AM on the next day even though the arrow indicates the event continues from the previous day.

For reference, if I set SlotDivisions="2", I get the expected result: https://blazorrepl.telerik.com/GxFOvYED302CzPCo32.

To deactivate all tabs I have to set the ActiveTabIndex parameter to -1.

This was working up to version 4.6.0. After that version I start getting an error:

Here is an example with 4.6.0 where it is working:

https://blazorrepl.telerik.com/QSPuvKvI06m6AhF929

Here is an example with the current version:

https://blazorrepl.telerik.com/mIvOlqlI062NR9Vi59

1. See the DatePicker Validation Demo
2. Highlight the year
3. Start typing 2029
4. See that even on the first input stroke the validation is triggered.

<Admin>

As a workaround, you can add the DebounceDelay parameter with a high number as in this REPL link. 

</Admin>

The "Edit Recurring Appointment" modal is only partially visible on mobile which prevents the user from proper editing.

For example, selecting Bootstrap-Main-Dark theme in the Project Wizard does not apply the dark mode.

===ADMIN EDIT===

For the time being, a possible workaround is to manually add class="k-body" to the <body> tag of your application. This will ensure, that the dark mode is correctly applied. This is required because, by design, the Default theme does not enable the typography system. The "k-body" class is required for the typography system to work properly on the document level and apply the predefined typography values to the page. For more detailed information, refer to Design System Documentation.

When the user scrolls the PDF Viewer down and then opens another PDF file, the new document should display on the first page. Currently, the new file displays scrolled to the page from the previous file and the user must scroll to the top manually.

===

A possible workaround is to scroll the PDF file with JavaScript in the PDF Viewer OnOpen event:

@inject IJSRuntime js

<TelerikPdfViewer Data="@PdfSource"
                  Height="600px"
                  OnOpen="@OnPdfViewerOpen"
                  Class="@PdfViewerClass">
</TelerikPdfViewer>

<script suppress-error="BL9992">
    function scrollPdfToTop(selector) {
        var pdfCanvas = document.querySelector(selector);
        if (pdfCanvas) {
            pdfCanvas.scrollTop = 0;
        }
    }
</script>

@code {
    private byte[]? PdfSource { get; set; }

    private string PdfViewerClass { get; set; } = "scrollable-pdf-viewer";

    private async Task OnPdfViewerOpen()
    {
        await js.InvokeVoidAsync("scrollPdfToTop", $".{PdfViewerClass} .k-pdf-viewer-canvas");
    }
}

After clicking the Print button, the pages are ordered incorrectly. Can be seen in the preview window.

Steps to reproduce:

1. Open https://demos.telerik.com/blazor-ui/pdfviewer/overview

2. Click the Print button

Used a MacBook Pro for this test.

• Used the Telerik UI for Blazor Productivity Tools extension in VS Code
• Launch - Telerik UI for Blazor Template Wizard
  • template - dashboard
  • telerik version 5.1.1
  • enable localization
  • .net 7.0
• Create a razor file with the TelerikDatePicker component and a binded value attribute for selected date
  • The selected date variable should be set to a default DateTime value
    • I used new DateTime(2024,9,1)
  • The attribute Format is not used in the component
  • Below the component show the value for the System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern variable

• Comment out all TileLayoutItems from Tile Layout
• Add DatePicker component to a TileLayoutItem
• In your terminal run dotnet watch to run the app
  • English is the culture in the top right
  • The format of the default date in the datepicker should be MM/dd/yyyy
    • Date is 9/1/2024
    • ShortDatePattern is M/d/yyyy
  • Switch the culture to German
  • The format of the date value should be dd.MM.yyyy
    • Date is 9.1.2024
    • ShortDatePattern is dd.MM.yyyy

REPL example:

https://blazorrepl.telerik.com/wIEiduuB379xcqGZ08

Steps to reproduce:

1. First click on the primary button. The dropdown does not open which is expected.
2. After that click on the arrow button. The dropdown does not open, but it should.

Last working version is 6.0.2:

 https://blazorrepl.telerik.com/coOiRYkB42URZx2823