We have a grid with a GridCheckboxColumn that we have configured through a '.unselectable-row' style so that certain elements cannot be selected (those elements with a padlock in the second column cannot be selected).

The grid works correctly in isolation, but when we add a TelerikLoaderContainer that is displayed during data loading process, the grid doesn't working properly: it is possible to select all the enabled elements of the grid using the button in the header of the checkbox column. However it is not possible to deselect them from the button in the header of the checkbox column when there is any unselectable element.

Here it is a link to REPL with a reproducible example: https://blazorrepl.telerik.com/GyYhYXPI24gIYgIJ03

To reproduce the problem, you sholud select all grid elements from the checkbox column header button and try to deselect them. You will not be able to deselect all the elements. 
Now comment the LoaderContainer component and repeat the test. You will see that now it is possible to deselect correctly all the elements.

How can we deselect all the elements from the header while keeping the loadercontainer?

Try with culture es-ES and you will see the problem.

When es-ES, "dot [.]" is not a decimal separator, therefore you can't use the "NumpadDecimal" key to write a decimal number.

@using System.Globalization

<b>Culture:</b> @CultureInfo.CurrentCulture.Name;
<br />
<b>Culture UI:</b> @CultureInfo.CurrentUICulture.Name
<br />
<b>DefaultThreadCurrentCulture:</b> @CultureInfo.DefaultThreadCurrentCulture?.Name
<br />
<b>DefaultThreadCurrentUICulture:</b> @CultureInfo.DefaultThreadCurrentUICulture?.Name
<br /><br />
<b>Val 1:</b>
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
&nbsp;&nbsp;
<TelerikNumericTextBox @bind-Value="@Val1" Decimals="6" Width="100px" />
<input type="number" @bind-value="@Val1" step="any" style="width: 100px" />

<br />
<b>Val 2:</b>
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />
&nbsp;&nbsp;
<input type="number" @bind-value="@Val2" step="any" style="width: 100px" />

@code {
    decimal Val1 { get; set; }
    decimal Val2 { get; set; }

    protected override void OnInitialized()
    {
        CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("es-ES");
        //CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = CultureInfo.DefaultThreadCurrentCulture = CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-US");
    }
}

[ADMIN EDIT]

In general, our components obey the culture that is set in the application. If the current culture requires a "," decimal separator, our component will accept commas and ignore dots. Our component doesn't know if the user is pressing the decimal separator key on the numeric pad, or the "standard"  [ > . ] key.

What we can do to improve the behavior is to implement a feature for automatic handling of the decimal separator character. In other words, if the component detects invalid decimal separator input, it will switch to the correct one. This feature will handle the Numpad key and output it in the right culture.

Here is a possible workaround that uses JavaScript to intercept the "other" decimal separator and insert the "correct" one in the NumericTextBox.

@inject IJSRuntime js

<span @onkeydown="@( (KeyboardEventArgs args) => OnSpanKeyDown(args, "ntb1") )">
    <TelerikNumericTextBox @bind-Value="@DValue"
                           Width="200px"
                           Id="ntb1" />
</span>

Code: @LogCode , Key: @LogKey

<!-- Move JS to external JS file in production apps -->
<script suppress-error="BL9992">
    function addDot(ntbId) {
        var textbox = document.querySelector("#" + ntbId);
        if (textbox && textbox.value.indexOf(".") == -1) { // or ","
            textbox.value += "."; // or ","
        }
    }
</script>

@code {
    decimal DValue { get; set; }

    string LogCode { get; set; }
    string LogKey { get; set; }

    async Task OnSpanKeyDown(KeyboardEventArgs args, string ntbId)
    {
        LogCode = args.Code;
        LogKey = args.Key;

        if (args.Key == ",") // or "."
        {
            await js.InvokeVoidAsync("addDot", ntbId);
        }
    }
}

Another option in the meantime is to use a standard HTML input or InputNumber with the Telerik CSS class "k-textbox". This way the input will look the same as a Telerik textbox and keep the app look consistent.

Bug report

Once the user locks a column through the column menu, they cannot unlock it, because the Unlock option remains disabled, while the Locked option remains enabled.

Regression in version 14.1.0. Potentially related to https://github.com/telerik/blazor/pull/14727

Reproduction of the problem

@page "/"

<TelerikGrid Data="@GridData"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Sortable="true"
             ShowColumnMenu="true"
             Width="700px">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" ShowColumnMenu="false" />
        <GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    private IEnumerable<SampleData> GridData = Enumerable.Range(1, 30).Select(x => new SampleData
        {
            Id = x,
            FirstName = $"FirstName {x}",
            LastName = $"LastName {x}",
            CompanyName = $"Company {x}",
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        });

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Current behavior

Cannot unlock a locked column, the Unlock option remains disabled.

Expected/desired behavior

The Unlock and Lock options in the column menu must reflect the current column state.

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'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.

Reproduction with Data parameter

https://blazorrepl.telerik.com/GJYPlrEW485dZtjX55

Reproduction with OnRead

I made a Blazor REPL reproduction: https://blazorrepl.telerik.com/mcuCGpYr4223mhWY49. Run and observe the person label is overlapping the dropdown.

How to reproduce:

1. Get code from the Remote Data Example.
2. Surround the ComboBox with a TelerikFloatingLabel, it will then look like this:

   <TelerikFloatingLabel Text="Person">
   <TelerikComboBox 
                   TItem="@Person" TValue="@int"
                    ScrollMode="@DropDownScrollMode.Virtual"
                    OnRead="@GetRemoteData"
                    ValueMapper="@GetModelFromValue"
                    ItemHeight="30"
                    PageSize="20"
                    TextField="@nameof(Person.Name)"
                    ValueField="@nameof(Person.Id)"
                    @bind-Value="@SelectedValue"
                    Filterable="true" FilterOperator="@StringFilterOperator.Contains">
       <ComboBoxSettings>
           <ComboBoxPopupSettings Height="200px" />
       </ComboBoxSettings>    
   </TelerikComboBox>
   </TelerikFloatingLabel>

I have been having issues adding the month view to a Telerik Blazor scheduler component, when there is grouping. It gives a null reference error any time I try to switch to the month view. I also tried it using the available demo for grouping in Telerik REPL, the only difference I found between my code and the demo was that I had used the ItemsPerSlot parameter.  I added this to the demo, and was able to reproduce the error I was seeing, and I have attached the console output from the REPL demo. I believe there is either a bug with the ItemsPerSlot being used in conjunction with grouping on a scheduler component, or some instruction missing from how to set it up properly to prevent this null reference issue. 

Changed code:

<SchedulerMonthView ItemsPerSlot="5"></SchedulerMonthView>

Demo used:

Blazor Scheduler (Event Calendar) Demos - Grouping | Telerik UI for Blazor

The ability to choose which options to appear in the ContextMenu.

=====

TELERIK EDIT: In the meantime, here is how to hide context menu items with CSS:

    /* Hide the Rename item in the FileManager context menu */
    .k-context-menu:has(.k-svg-i-download) .k-menu-item:nth-of-type(1) {
        display: none;
    }

    /* Hide the Delete item in the FileManager context menu */
    .k-context-menu:has(.k-svg-i-download) .k-menu-item:nth-of-type(3) {
        display: none;
    }

Here is a complete example: https://blazorrepl.telerik.com/cpPkuBEq408A36p010

Description

When the ComboBox is bound with the OnRead event, after filtering and pressing the Tab key the highlighted item that matches the user input is not selected. If the ComboBox is bound through the Data parameter, the highlighted item is selected as expected.

Steps To Reproduce

1. Run this REPL example: https://blazorrepl.telerik.com/GKOwYyuD25UuABfR07
2. Focus the ComboBox and type in "BMW"
3. Press the Tab key.

Actual Behavior

The ComboBox is blurred and the BMW item is not selected.

Expected Behavior

The ComboBox is blurred and the BMW item is selected.

Browser

All

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

No response

The NOW button in the TimePicker's TimeView sets the time value, according to the server's time zone. Instead, it should use the client-side (user) time zone.

===

Telerik edit:

In the meantime, you can subscribe to the TimePicker's ValueChanged event and detect when the user clicks on Now. In such cases, the event handler will receive the current server time with a small margin of error, that depends on the latency.

<TelerikTimePicker Value="@TimePickerValue"
                   ValueChanged="@( (DateTime? d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>

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

    private void TimePickerValueChanged(DateTime? newValue)
    {
        if (newValue.HasValue && newValue - DateTime.Now < new TimeSpan(0, 0, 1))
        {
            // Retrieve and set the correct user's local time. The dummy code below is just for testing.
            TimePickerValue = DateTime.Now.AddMinutes(2);
        }
        else
        {
            TimePickerValue = newValue;
        }
    }
}

Currently, I'm using your Calendar component for a vacation request feature. It works decently for picking dates in that I can use CTRL and Shift to select many dates. I'm currently making the page responsive but the mobile user experience lacks because there is no way to select more than one date.

The ideal user experience would be to be able to single click (or tap from mobile) to select a date and be able to do that on as many dates as preferred (to select many). Clicking/tapping again would deselect the date. That would be better in both the desktop and mobile versions and more intuitive for a user (as no one has initially assumed CTRL and Shift work - I have had to train them).

• The PDF Viewer does not display the initial file if Zoom is set to FitToWidth or FitToPage. This is due to --scale-factor: NaN; --total-scale-factor: NaN; set on the PDF Viewer element.
• If the PDF Viewer initially shows with no loaded file, setting Zoom to FitToWidth or FitToPage initially or after opening a file leads to infinity zoom due to --scale-factor: Infinity; --total-scale-factor: Infinity; set on the PDF Viewer element.

The only scenario that works is to set the initial Zoom to a numeric value and have an open file by default.

The TreeView OnItemContextMenu event should fire only for the clicked item, but it fires for its parents too. The issue started occurring in version 13.0.0.

Test page

https://www.telerik.com/blazor-ui/documentation/components/treeview/events#example

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.

The issue is also reproducible in the other dropdown components: https://blazorrepl.telerik.com/GUurGmvw32oPqGYu03

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 ]

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

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