The following exception occurs:

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

............

at Telerik.Blazor.Components.Common.Loader.ComponentLoaderContainer.DisposeAsync()

When the user closes the browser and the web page contains any of the below components:

• DockManager
• FileManager
• Grid
• ListView
• PdfViewer
• PivotGrid
• Scheduler
• SpreadSheet
• TreeList

There is an undocumented breaking change in the selection behavior of the v13.0.0 TreeView component that prevents us from upgrading from v12.3.0.

In v12.3.0, selecting a TreeView checkbox does change the TreeView item selection or trigger the selection change events. In v13.0.0, checking an item does also change the selection. The v12.3.0 behavior is important for our implementation because selecting a TreeView item in our application fetches data from a database and we do not want the performance overhead of those calls when checking an item---we want the user to be able to select multiple items and only then explicitly fetch the data for all of them.

I've created a minimal example here: https://blazorrepl.telerik.com/cqYdEePd40Zq3ava43. You can see the behavior differences when switching between versions.

Please let me know if there's any additional information we can provide. A workaround to this behavior would be appreciated. Thank you!

An exception occurs if a Grid row is dropped in another empty Grid in RTL mode:

Error: System.FormatException: the input string '-1' was not in a correct format.

I am using ComboBox and I want to be able to filter by two model properties. To achieve this I have implemented custom filtering through the OnRead event. Additionally, I am ordering the data to first match the results from the one property, which also is used for the TextField, and after that to match the results from the other property. However, when the results are only from the match of the second property, there is no focus.

Here is a REPL example https://blazorrepl.telerik.com/wyaMQhEN108axXJ036 

Steps to reproduce the issue:

Type "a": "Value test - ano" has the focus (the first option in the list)

Type "an": "Value test - ano" receives the focus (the first option in the list)

Type "ano": "Value test - ano" receives the focus (the first option in the list)

Type "anot": no item has focus despite the results being only "Another Value - val"

Bug report

Reproduction of the problem

1. Run this example: https://blazorrepl.telerik.com/cqknbdvw00QmDg6q14
2. Focus the ComboBox
3. Press Esc key

Current behavior

The ComboBox value is cleared.

Expected/desired behavior

The ComboBox value remains.

Environment

• Telerik version: 13.0.0
• Browser: [all ]

Hi,

I would like to have a Expand/Collapse All Grid Groups button in the Grid Header. I know this is possible to do so programmatically outside of the grid but my users want it inside the Grid. 

Thanks,

Humayoon

This public feature request:

• Explains how the TelerikRootComponent works.
• Outlines the problems of the current software design in static .NET 8 Blazor apps.
• Measures customer demand for a major change that may possibly resolve the current limitations.

How the TelerikRootComponent Works

Historically, the TelerikRootComponent was designed with the following purposes:

• To host and render all Telerik Blazor popups as RenderFragments. This means that all popups are rendered where the TelerikRootComponent is defined in the application's component hierarchy. In most cases, correct popup position requires the TelerikRootComponent to wrap all the content on the web page. Otherwise the correct position is not guaranteed and this is documented. In addition, the TelerikRootComponent instance is a CascadingValue, which allows it to collect all popup RenderFragments.
• The TelerikRootComponent exposes parameters for global application-wide Telerik settings, such as icon type or RTL support. This is another reason why it makes sense to have a single TelerikRootComponent that wraps all the page content.

Problems and Limitations in .NET 8 Blazor Static Apps

.NET 8 Blazor apps with "Per Component" interactivity location create a big challenge for the above state of affairs:

• Cascading values do not pass across render mode boundaries. .NET 8 includes a new feature for passing cascading values to interactive components (builder.Services.AddCascadingValues()), but this mechanism does not support passing of RenderFragments, because they are not JSON serializable. This brings the requirement that the TelerikRootComponent is part of an interactive component hierarchy.
• When the TelerikRootComponent is in a non-layout .razor file, it triggers more re-renders than normally. They are related to internal MediaQuery instances and all popups, which the root component manages.

So, developers who work with a globally static app with specific interactive components ("islands of interactivity") may need to:

• Place the TelerikRootComponent somewhere inside the component hierarchy, so it can't wrap all the page content. This will lead to wrong popup position.
• Use multiple TelerikRootComponents. This requires to define the same parameters for each TelerikRootComponent instance.

Next Steps

All developers who develop static .NET 8 Blazor apps with "Per Component" interactivity location:

1. Please vote for this feature request, so that we can measure how many customers are affected by the described limitations.
2. Post here and describe:
   • Why do you need to use apps with "Per Component" interactivity.
   • Your specific challenges with the current TelerikRootComponent setup.

Hello,

 at version 12.3.0 TelerikFilter is crashing "at load". Prior this version, same markup = ok.

Error: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikFilter' does not have a property matching the name 'ValueChanged'.

also in demo:

https://www.telerik.com/blazor-ui/documentation/components/filter/integration

usage:

<TelerikFilter @bind-Value="@AdvancedFilterValue">
	<FilterFields>
		@foreach (var it in GridDef.ColStore.Where(x => x.Verejny == true))
		{
			<FilterField Name="@it.FldName" Type="@it.FldType" Label="@it.VerejnyNazev"></FilterField>
		}
	</FilterFields>
</TelerikFilter>

Possible to add in the FileManager preview pane, a preview of the actual file, if the file type is simple; i.e. image or video (or pdf); or provide functionality to add preview.

Cheers

Phil

When a Dialog is shown from a modal Window, the Dialog appears behind the Window on second opening.

Here is a test page with a workaround:

@inject IJSRuntime js

<TelerikButton OnClick="@( () => WindowVisible = true )">Show Window</TelerikButton>

<TelerikWindow @bind-Visible="@WindowVisible"
               Modal="true">
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        <p>Window Content</p>
        <TelerikButton OnClick="@OnShowDialogButtonClick">Show Dialog</TelerikButton>
    </WindowContent>
</TelerikWindow>

<TelerikDialog @bind-Visible="@DialogVisible"
               Width="300px"
               Class="dialog-on-window">
    <DialogTitle>
        Dialog Title
    </DialogTitle>
    <DialogContent>
        <p>Dialog Content</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton OnClick="@( () => OnDialogButtonClick(true) )">OK</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<script suppress-error="BL9992">
    function bringDialogToTop() {
        var dialogWrapper = document.querySelector(".dialog-on-window").closest(".k-dialog-wrapper");
        if (dialogWrapper) {
            dialogWrapper.style.zIndex = parseInt(dialogWrapper.style.zIndex) + 2;
        }
    }
</script>

@code {
    private bool WindowVisible { get; set; }

    private bool DialogVisible { get; set; }

    private bool ShouldFocusDialog { get; set; }

    private void OnShowDialogButtonClick()
    {
        DialogVisible = true;
        ShouldFocusDialog = true;
    }

    private void OnDialogButtonClick(bool result)
    {
        DialogVisible = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldFocusDialog)
        {
            ShouldFocusDialog = false;
            await Task.Delay(1);

            await js.InvokeVoidAsync("bringDialogToTop");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

When a table row does not have any cells, there might be lots of script errors when hovering the empty row with the mouse.

The error is the following:
Uncaught RangeError: Not a table node: doc

Sometimes we even have a server error:
Microsoft.JSInterop.JSException: Not a table node: table_wrapper
RangeError: Not a table node: table_wrapper
    at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1557112
    at pl.get (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1558816)
    at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1638148
    at Be.decorations (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1638538)
    at https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1529498
    at Wa.someProp (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1548718)
    at Fa (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1529464)
    at Wa.updateStateInner (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1545305)
    at Wa.update (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1544591)
    at Wa.setProps (https://somesite/caesar/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?x=25.1.7.1096:23:1544734)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikEditor.SetOptions()
   at Telerik.Blazor.Components.TelerikEditor.OnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

The server error is really hard to recreate, but it seems like users that has a slow computer and hovers the editor directly when loading gets this error sometimes...

Here is the source code (hovering the empty row will generate scripting errors):

<TelerikEditor Height="300px" @bind-Value="@Value" EditMode="Telerik.Blazor.EditorEditMode.Iframe" ReadOnly="true">
</TelerikEditor>

@code {
    public string Value { get; set; } =
            @"
<table>
    <tbody>
        <tr>
            <td>
               Some text
            </td>
        </tr>
        <tr style=""height: 24px"">
        </tr>
        <tr>
            <td>
                Some text
            </td>
        </tr>
    </tbody>
</table>
    ";
}

If LoadGroupsOnDemand="false", I am able to programmatically expand the groups through the state. However, this is not possible when loading group data on demand.

Please allow programmatically expanding the groups when LoadGroupsOnDemand="true". This should go together with an event (OnStateChanged?) that will fire when LOD groups are expanded or collapsed.

Currently, on mobile devices (where is no hover), to open the child menu you need to click/tap the parent and the only way close it afterwards is if you click away. This is not very convenient for mobile usage. I want to be able to close the child menu on click/tap of the parent as well.

How to reproduce:

1. Go to https://demos.telerik.com/blazor-ui/grid/editing-incell
2. Go to the last Grid page, which has empty space below the last table row.
3. Open any Grid cell for editing.
4. Click on the empty space in the Grid below the last table row.
5. The Grid does not exit edit mode like it should.

The regression was introduced in version 12.2.0. The last version that works correctly is 12.0.0.

The possible workarounds are:

• Remove the Grid Height, so that there is no empty space after the last Grid row. You can apply a max-height style to the Grid to prevent unlimited vertical expansion.
• Use an @onfocusout event in the Grid <EditorTemplate> to close the Grid edit mode programmatically:

@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             EditMode="@GridEditMode.Incell"
             OnCreate="@OnGridCreate"
             OnDelete="@OnGridDelete"
             OnUpdate="@OnGridUpdate"
             Height="600px">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
                    <TelerikTextBox @bind-Value="@dataItem.Name" />
                </span>
            </EditorTemplate>
        </GridColumn>
        @* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
                    <TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
                </span>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Width="180px">
            <GridCommandButton Command="Delete">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridRef { get; set; }

    private ProductService GridProductService { get; set; } = new();

    private async Task OnGridCellFocusOut(string field)
    {
        await Task.Delay(100);

        if (GridRef is null)
        {
            return;
        }

        GridState<Product> gridState = GridRef.GetState();
        Product? editItem = gridState.EditItem as Product;

        if (editItem is null)
        {
            return;
        }

        GridCommandEventArgs args = new GridCommandEventArgs()
        {
             Field = field,
             Item = editItem
        };

        await OnGridUpdate(args);


        gridState.EditField = default;
        gridState.EditItem = default!;
        gridState.OriginalEditItem = default!;

        await GridRef.SetStateAsync(gridState);
    }

    private async Task OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        await GridProductService.Create(createdItem);
    }

    private async Task OnGridDelete(GridCommandEventArgs args)
    {
        var deletedItem = (Product)args.Item;

        await GridProductService.Delete(deletedItem);
    }

    private async Task OnGridRead(GridReadEventArgs args)
    {
        DataSourceResult result = await GridProductService.Read(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    private async Task OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;

        await GridProductService.Update(updatedItem);
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
        public decimal? Price { get; set; }
        public int Quantity { get; set; }
        [Required]
        public DateTime? ReleaseDate { get; set; }
        public bool Discontinued { get; set; }
    }

    #region Data Service

    public class ProductService
    {
        private List<Product> Items { get; set; } = new();

        private int LastId { get; set; }

        public async Task<int> Create(Product product)
        {
            await SimulateAsyncOperation();

            product.Id = ++LastId;

            Items.Insert(0, product);

            return LastId;
        }

        public async Task<bool> Delete(Product product)
        {
            await SimulateAsyncOperation();

            if (Items.Contains(product))
            {
                Items.Remove(product);

                return true;
            }

            return false;
        }

        public async Task<List<Product>> Read()
        {
            await SimulateAsyncOperation();

            return Items;
        }

        public async Task<DataSourceResult> Read(DataSourceRequest request)
        {
            return await Items.ToDataSourceResultAsync(request);
        }

        public async Task<bool> Update(Product product)
        {
            await SimulateAsyncOperation();

            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);

            if (originalItemIndex != -1)
            {
                Items[originalItemIndex] = product;
                return true;
            }

            return false;
        }

        private async Task SimulateAsyncOperation()
        {
            await Task.Delay(100);
        }

        public ProductService(int itemCount = 5)
        {
            Random rnd = Random.Shared;

            for (int i = 1; i <= itemCount; i++)
            {
                Items.Add(new Product()
                {
                    Id = ++LastId,
                    Name = $"Product {LastId}",
                    Description = $"Multi-line\ndescription {LastId}",
                    Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
                    Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
                    ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
                    Discontinued = LastId % 2 == 0
                });
            }
        }
    }

    #endregion Data Service
}