Steps to reproduce
Reproducible with UI for Blazor, as well as UI for ASP.NET Core (PDF.js and DPL processing)

1. Open the attached file in the PDFViewer.

Actual Behavior
The content is visualized distorted, large parts of it are missing, layout is messed up.

Expected Behavior
The document content is visualized properly, as it is with: https://mozilla.github.io/pdf.js/web/viewer.html

Bug report

Reproduction of the problem

(bug report only)
1. Run this example: https://blazorrepl.telerik.com/cUaBGOOZ34pkp6wB57
2. Inspect the MultiSelect’s input.
3. Click within the component’s input area, to open its popup.

Current behavior

(optional)
When the dropdown opens, an aria-controls attribute is applied to the MultiSelect’s input. Its value does not match any existing DOM element.

Expected/desired behavior

The value of the aria-controls attribute should point at an existing element (e.g., the popup’s list element: https://www.telerik.com/blazor-ui/documentation/components/multiselect/accessibility/wai-aria-support#multiselect-wrapping-element ). But in this case the MultiSelect is not bound to data and a list element is not rendered in the popup.

Environment

• Kendo/Telerik version: 14.1.0
• jQuery version:
• Browser: [all ]

The Popup OnHide event does not fire if the app has previously closed the Popup instance programmatically with the Hide() method.

The issue can be reproduced in this documentation example.

The AutoComplete component does not update the category grouping header, even when the data within that group has been removed. As a result, the outdated group header remains visible until you scroll down to another group, at which point the first group header refreshes and disappears as expected.

Repro: REPL link.

Hi Support,

I have an issue with the DragToSelect feature of a Telerik grid in Blazor when this grid is inside a TelerikWindow. 

Summary
When a TelerikGrid configured with GridSelectionSettings DragToSelect="true" is rendered inside the <WindowContent> of a <TelerikWindow>, the drag-to-select (rubber-band) behavior is not working properly — the user can only select cells/rows via individual clicks.

Single-click selection continues to work in both cases. The issue is specific to the drag gesture.

Steps to reproduce
Create a page with a TelerikWindow set to Visible="true".
Inside <WindowContent>, place a TelerikGrid with:
SelectionMode="@GridSelectionMode.Multiple"
SelectedCells / SelectedCellsChanged bound
<GridSettings><GridSelectionSettings SelectionType="@GridSelectionType.Cell" DragToSelect="true" /></GridSettings>
Open the window and try to select multiple cells by pressing the mouse button on a cell and dragging over neighboring cells.

Expected behavior
A rubber-band selection rectangle appears and all cells the pointer passes over become selected — same as when the identical grid is placed on a regular page (outside a modal window).

Actual behavior
Drag selection occur rarely. Only the single cell under the initial mousedown gets selected. The rubber-band rectangle rarely appears, and SelectedCellsChanged fires with a single descriptor instead of the full drag range.

Minimal repro (REPL-ready)
<TelerikWindow Visible="true" Width="800px" Height="500px">
    <WindowTitle>Repro</WindowTitle>
    <WindowContent>
        <TelerikGrid Data="@Data" TItem="SampleItem"
                     SelectionMode="@GridSelectionMode.Multiple"
                     SelectedCells="@SelectedCells"
                     SelectedCellsChanged="@((IEnumerable<GridSelectedCellDescriptor> c) => SelectedCells = c)">
            <GridSettings>
                <GridSelectionSettings SelectionType="@GridSelectionType.Cell" DragToSelect="true" />
            </GridSettings>
            <GridColumns>
                <GridColumn Field="@nameof(SampleItem.Id)" />
                <GridColumn Field="@nameof(SampleItem.Name)" />
            </GridColumns>
        </TelerikGrid>
    </WindowContent>
</TelerikWindow>

@code {
    public record SampleItem(int Id, string Name);
    private List<SampleItem> Data = Enumerable.Range(1, 20).Select(i => new SampleItem(i, $"Item {i}")).ToList();
    private IEnumerable<GridSelectedCellDescriptor> SelectedCells = Enumerable.Empty<GridSelectedCellDescriptor>();
}

Now my questions :
- Is this a known limitation of DragToSelect when the grid is inside a modal TelerikWindow?
- Is there an officially supported workaround (CSS pointer-events tweak on .k-overlay, event capture override, grid setting, etc.)?
- If it is a bug, could you open a public issue we can track?

Many thanks you in advance.

Franck Boisdé

Description

Appointment editing does not work on Chrome for mobile (Android).

Steps To Reproduce

Run the following demo in the Chrome for mobile browser, on a mobile device with Android : https://demos.telerik.com/blazor-ui/scheduler/appointment-editing

1. Attempt to edit an appointment by double tapping it

Actual Behavior

The popup editor does not show up.

Expected Behavior

The popup editor shows up.

Browser

Chrome

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

No response

Support multiple users editing the same content in an editor.

This would be similar to the editor in something like confluence or online Word.

Regards

Bug report

Reproduction of the problem

(bug report only)
Regression introduced in 13.0.0.
1. Run this example: https://blazorrepl.telerik.com/wUuSGClv00orFeRm59

Current behavior

(optional)
The Size, Rounded, FillMode parameters are ignored.

Expected/desired behavior

The parameter values should apply and change the appearance of the SearchBox.

Environment

• Browser: [all ]

I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?

=====ADMIN EDIT=====

Possible alternative:

1. Utilize a custom Editor's tool that opens a Window or Dialog containing a FileManager.
2. Use the FileManager's SelectedItemsChanged event to determine which image the user wants to insert into the Editor.
3. Programmatically execute the Editor's insertImage command.

I would like the following behavior in the date picker. Perhaps it can be achieved with a parameter similar to the one in UI for ASP.NET AJAX - the FocusedDate property (something like RadDatePicker1.FocusedDate = DateTime.Today.AddDays(30);).

The current behaviour is:

* if date is set, show month of set date
*else show month of current date (today)

Desired behaviour:

* if date is set, show month of set date
* else if min date's month is greater than current date month then show month of min date
* else show month of current date

Here is a code snippet to illustrate the issue:

Open the picker - it will start in the month with today's date, but I want it to start at the min date - one month later

<TelerikDatePicker @bind-Value="@theDate" Min="@minDate" Max="@maxDate"></TelerikDatePicker>
@code {
    DateTime theDate = DateTime.Now;
    DateTime minDate = DateTime.Now.AddDays(60);
    DateTime maxDate = DateTime.Now.AddDays(230);
}

I am testing with a Blazor WASM Standalone app that uses Telerik UI for Blazor. I have a sample page with a button on click of which a predefined dialog (for example, alert) is shown. If you make some change on the page and hot reload is enabled, the button click no longer opens the predefined dialog. The dialog is shown only if I navigate to a different page.

The Set button should not be enabled when you change the month from the button in the popup, until the user selects a date too. 

===

TELERIK EDIT:

If the user clicks Set without selecting a date, the component will assume DateTime.MinValue. You can set the current DateTime or clear the Value by using the DateTimePicker OnChange or ValueChanged event:

<TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
                       OnChange="@DateTimePickerValueChanged"
                       Width="300px">
</TelerikDateTimePicker>

@code {
    private DateTime? DateTimePickerValue { get; set; }

    private void DateTimePickerValueChanged(object currentValue)
    {
        if (DateTimePickerValue.HasValue && DateTimePickerValue.Value == DateTime.MinValue)
        {
            // Set current DateTime
            DateTimePickerValue = DateTime.Now;

            // OR

            // Clear the value
            //DateTimePickerValue = default;
        }
    }
}

Hi,

I would like checkbox support including the check all checkbox on the multiselect component like: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support

The url below shows how to create custom checkboxes in the multiselect component but adding a check all checkbox in the headertemplate does not update the multiselect popup

https://docs.telerik.com/blazor-ui/knowledge-base/multiselect-checkbox-in-dropdown?_ga=2.50111909.206897922.1631541466-694624900.1630583797&_gac=1.246637872.1631604077.EAIaIQobChMI8PnX6Pb98gIVkwCLCh381AjMEAAYASAAEgLROPD_BwE

I would like to see icon support for the switch control.  See the attached screen shot for the use case.

With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?

---

TELERIK EDIT

In the meantime, here are a few possible workarounds:

1. Use the DateTimePicker's ValueChanged event to detect new values that are very close or match the server's current DateTime. In such cases, you can assume that the user has clicked on TODAY / NOW, and set the local user time as a component value.

Server Time on UI Refresh: @DateTime.Now.ToLongTimeString()
<br />
User Local Time on Page Load: @LocalTime?.ToLongTimeString()
<br />
User Local Time Offset: @LocalOffset
<br />
<br />

<TelerikDateTimePicker Value="@PickerValue"
                       ValueChanged="@( (DateTime? newValue) => PickerValueChanged(newValue) )"
                       ValueExpression="@( () => LocalTime )"
                       Format="yyyy-MMM-dd HH:mm:ss"
                       Width="240px" />

<!-- Move JS code to a separate JS file in production -->
<script suppress-error="BL9992">
    function getLocalTime() {
        var d = new Date();
        return d.getTimezoneOffset();
    }
</script>

@code {
    private DateTime? PickerValue { get; set; }
    private DateTime? LocalTime { get; set; }
    private int LocalOffset { get; set; }

    private void PickerValueChanged(DateTime? newValue)
    {
        DateTime serverNow = DateTime.Now;
        DateTime utcNow = DateTime.UtcNow;
        TimeSpan nowTolerance = new TimeSpan(0, 0, 10);

        if (newValue - serverNow < nowTolerance)
        {
            PickerValue = utcNow.AddMinutes(-LocalOffset);
        }
        else
        {
            PickerValue = newValue;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            LocalOffset = await js.InvokeAsync<int>("getLocalTime");
            LocalTime = DateTime.UtcNow.AddMinutes(-LocalOffset);
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

2. Use the DatePicker's HeaderTemplate with a custom TODAY / NOW button. 

3. Hide the NOW button with CSS:

<style>
    .no-now-button .k-time-now {
        display: none;
    }
</style>

<TelerikDateTimePicker @bind-Value="@PickerValue"
                       Format="yyyy-MMM-dd HH:mm:ss"
                       PopupClass="no-now-button"
                       Width="240px" />

@code {
    private DateTime? PickerValue { get; set; }
}