When I click on the CheckBox's label, "Select All," the dropdown closes. While if I click the TelerikCheckBox itself, it remains open.

===

TELERIK EDIT

Please use the built-in Select All functionality of the MultiSelect. It doesn't exhibit the described problem.

For other scenarios that require a checkbox in the HeaderTemplate, Possible workarounds include:

• Wrap the clickable UI in the MultiSelect HeaderTemplate in an element with a tabindex attribute: https://blazorrepl.telerik.com/mfOlnvFk40G8PElJ33
• Cancel the MultiSelect OnClose event conditionally: https://blazorrepl.telerik.com/QpYvxvla44M3nsdp57

I'm experiencing a flickering in the TreeList InCell Editing demo here: https://demos.telerik.com/blazor-ui/treelist/editing-incell

Steps to reproduce:

1. Click on "Mountain Bikes"

2. Click on "Road Bikes"

3. Click on "Touring Bikes"

It can actually be reproduced by clicking on any three editable cells.

Any ideas?

Thank you.

Use a ToolBar with its ToolBarTemplateItem (with DropDownList inside of the template) in a separate component. Try to switch values in the DropDownList with the arrows of the keyboard. The value in the DropDownList does not change until you move away from it with a right arrow. This only happens when the template with the dropdown inside is in a separated component.

-------------------- ADMIN EDIT --------------------

The workaround for such a scenario is to export the DropDownList too onto a separated component and then call it in the ToolBarTemplateItem. See the attached sample project.

I am overriding the built-in Add command and setting an InsertedItem through the TreeList state. However, it looks like the the built-in validation is invoked twice and two validation Tooltips are displayed for the field.

When you type something in the grid searchbox, there will be a X at the end to clear the box.

However, if you restore the grid from previously stored state like localstorage, and if the box has value, the X is not there.

Thanks!

If you use the FloatingLabel, when you tab into the DateInput control, the cursor is set at the very end of the text of the date format. However, if you do not use the FloatingLabel, and you tab into the DateInput control, the placeholder text is selected.

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

===

ADMIN EDIT

===

The report is initially opened for DateInput, however, it also targets the rest of the date pickers that are compatible with FloatingLabel.

DatePicker cursor not advancing after month input. The problem arises when dd/MMM/yyyy format is applied.

To reproduce the issue open this REPL example. Type any date in the second DatePicker. When inserting a month value the cursor is not moved to the year section.

The Font Size and Font Family tools display the currently applied style value in the user selection only if the selection is inside one HTML element. This prevents the user from resetting (removing) the current font style.

Test scenario:

1. Select all the Editor content and apply a custom font size or font family.
2. Select content, which has the same styles applied (for example, the 2nd and 3rd "foo" on line 1).
3. Select content, which has different styles applies (for example, the 1st and 2nd "foo" on line 1).
4. Select content in multiple paragraphs (for example, the last "foo" and the first "bar").

@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@EditorToolSets.All" />

<h2>Raw Editor Value</h2>

<TelerikTextArea @bind-Value="@EditorValue"
                 Rows="5" />

@code {
    private string EditorValue { get; set; } = @"<p><strong>Foo</strong> foo foo.</p><p>Bar <strong>bar</strong> bar.</p><p>Baz baz <strong>baz</strong>.</p>";
}

The possible workarounds are:

• Reset (remove) the font styles separately for each HTML element.
• Set another font style instead of resetting it.

Hello,

We've come across a bug. It seems as whatever tool button(s) that should be selected is not shown correctly. It appears to show the previously selected.

Repro steps:

1. Write two different formatted texts on separate lines in your Editor component.
2. Move the cursor to the first line
3. Move the cursor to the second line that has a different formatted text. Note that the tool button for the formatted text on the first line is shown as selected.
   
   This should happen:
   

Is this an intended behaviour? Our users are confused :)

/Patrik

When double-clicking a task in the Gantt Timeline, the popup edit form may not appear. Instead, the vertical blue band for task dragging may show.

The problem is more likely to occur when using a touchpad.

Even if setting ReadOnly="true", tables in the Editor can be resized...

This only happens in Iframe mode!

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

When the user presses ESC to exit edit mode from an EditorTemplate with a ComboBox / MultiColumnComboBox / MultiSelect, the cell value is cleared and this change persists in subsequent editing. The original data item value is cleared too, although this is not immediately obvious.

The issue occurs in version 14.1.0 and WebAssembly apps are more likely to suffer from it.

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!

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
}

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

When the user selects a value and then focuses on another component the OnBlur of the ComboBox is not triggered. The issue is reproducible in the Firefox browser (tested with version 109.0).

To reproduce the issue open the following REPL example in the Firefox browser:
https://blazorrepl.telerik.com/mdklmHYN06lVQjyL26

Select a value in the first ComboBox and then focus on the second ComboBox. The OnBlur event should trigger.

Hi Telerik Support

Facing an issue with Keyboard navigation in Telerik Grid component. 

When we use TAB to navigate, the grid header gets focus only for the first time. After completing one round of navigation, second time after the Toolbar buttons, if we TAB out, focus goes to the pager sections skipping the grid header part.

Pls refer the REPL sample from Telerik website:

https://blazorrepl.telerik.com/GHOUEQPu32fDqVkl23?_ga=2.110299852.854118306.1687429777-597574975.1687340896&_gl=1*1exmltg*_ga*NTk3NTc0OTc1LjE2ODczNDA4OTY.*_ga_9JSNBCSF54*MTY4NzQyOTc3Ny40LjEuMTY4NzQzMDkxNC41Ni4wLjA. 

Steps to reproduce:

1) Use ALT + W and then use TAB key to navigate

2) First focus goes to the Toolbar button (Add Product), then goes to the Grid Header and then if we TAB again focus goes to the Pager section

3) After the Pager section, if we do steps 1 and 2 again, we can see that it skips the Grid Header focus second time onwards.

I would like to add some custom actions into the popup window. I know I can implement a custom edit popup with an entirely custom content and actions. However, this requires a lot of custom work to just add one additional action in the popup. Please provide an easier option to add custom actions in the edit window.