When I override the IsValid method to return a ValidationResult the Incell & Inline edit modes allow the editing to be continued even if an invalid value is present. 

===

Telerik edit: A possible workaround is to cancel OnUpdate and possibly, OnEdit too. Here is a complete example:

https://blazorrepl.telerik.com/QyaWxkvv10stL8jB06

The PDF Viewer may render parts of the contents as blank (empty space) and only form elements like checkboxes remain visible.

Test PDF file in ticket 1716925

I would like a Blazor PropertyGrid with

-- that could be bound to an instance of a custom Type that implemented INotifyPropertyChanged

-- with expandable/collapsible sections with the ability to prevent a  user from expanding a collapsed section (e.g. the user lacks privileges to see that section's data)

-- would keep track of its UI state including collapsed sections (similar to the excellent implementation in Telerik's  Blazor Grid)

-- that would allow the use of all Telerik Blazor editors as cell-value editors

I am interested in using this component primarily as a data-entry UX in a data-entry-intensive line-of-business application.  Such a grid offers standard navigation on all data-entry screens in the application, eliminating tab-order, thereby greatly simplifying the end-user experience. The expanding/collapsing sections make it very economical in its use of screen real-estate. I have used such a component (from a competitor of Telerik) in a WinForms application with excellent results. 

Page Down and Page Up buttons are not working until the user clicks on the scroll when virtual scrolling is enabled.

To reproduce the issue:

1. Open the following REPL example:

https://blazorrepl.telerik.com/QHYPQVFv55nHGRWV59

2. Focus on the Grid.

3. Try to scroll with the PageDown button.

Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#\39 374a450-079d-4586-b823-d6bc7723505f)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: Hermes Home - https://localhost/TrafficLoss

Element path: #\39 374a450-079d-4586-b823-d6bc7723505f

Snippet: <div class="k-grid-aria-root" id="9374a450-079d-4586-b823-d6bc7723505f" role="grid" aria-label="Data table">

How to fix: 
Fix any of the following:
  Element has children which are not allowed (see related nodes)
  Element has no aria-busy="true" attribute

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

============================  code =============================

                           <TelerikGrid Data="@ViewModel.RDLInformation" TItem="TLSummary"
                                                        Pageable="true" 
                                                        Sortable="true" 
                                                        Groupable="false"
                                                        FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                                                        Resizable="true" 
                                                        Reorderable="true"
                                                        Height = "100%">

....

                            </TelerikGrid>

Bug report

Reproduction of the problem

(bug report only)

Scenario: ComboBox with AllowCustom enabled and Filtering disabled.
Run this example: https://blazorrepl.telerik.com/cqbvbuvp45YAv3Su16

1. Focus the ComboBox and type in “aaa”.
2. Press Tab key.

Current behavior

(optional)
The first item in the list is selected: “first”

Expected/desired behavior

The entered text remains in the CombBox input: “aaa”

Environment

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

Please add an OTP Input component to Telerik UI for Blazor. It already exists in Kendo UI for jQuery, Kendo UI for Angular, ASP.NET Core and ASP.NET MVC, but Blazor is missing it.

It’s very common for two-factor authentication and email/SMS code verification. Today we have to build it ourselves with multiple TextBoxes and JS interop.

Main features, similar to the Blazor Bootstrap OTPInput:

• Configurable number of fields
• Automatic focus to the next field and Backspace to the previous one
• Paste the full code across all fields
• @bind-Value and an event when all fields are filled
• Form validation support
• Mobile support with autocomplete="one-time-code"

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

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

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

Hello,

When a Grid is using multi column headers, and I add one more column in the OnBeforeExport event, this new column has no title in the exported file.

A possible workaround might be to use a column with zero Width and change the width in OnBeforeExport.

@using Telerik.Blazor.Common.Export.Excel
@using Telerik.Blazor.Components.Grid

<TelerikGrid TItem="@FlowRun"
             Pageable="true"
             OnRead="@GetData">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
        <GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeExcelExport" />
        <GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeCsvExport" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(FlowRun.FileName)" Title="File Name" Width="300px" />
        <GridColumn Field="@nameof(FlowRun.Type)" Title="Type" Width="100px" />
        <GridColumn Field="@nameof(FlowRun.FileSize)" Title="File Size" Width="200px" />
        <GridColumn Title="Source">
            <Columns>
                <GridColumn Field="@(nameof(FlowRun.Source))" Title="MPID"/>
                <GridColumn Field="@(nameof(FlowRun.SourceFileProtocol))" Title="Type" />
            </Columns>
        </GridColumn>
        <GridColumn Field="@nameof(FlowRun.ErrorMessage)"
                    Title = "Error"
                    Width="0" />
    </GridColumns>
</TelerikGrid>

@code {
    bool ExportAllPages { get; set; }

    private async Task GetData(GridReadEventArgs args)
    {
        args.Data = Enumerable.Range(1, 10).Select(x => new FlowRun
            {
                FileName = $"File {x}",
                Type = $"Type {x}",
                FileSize = x * 2,
                Source = $"Source {x}",
                SourceFileProtocol = FileProtocol.CIX,
                ErrorMessage = $"Error {x}"
            }).ToList();

        args.Total = 100;
    }

    private void BeforeCsvExport(GridBeforeCsvExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void BeforeExcelExport(GridBeforeExcelExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void AddErrorMessageColumn(GridBeforeSpreadsheetExportEventArgs args)
    {
        args.Columns.Find(x => x.Field == nameof(FlowRun.ErrorMessage)).Width = "100px";

        //args.Columns.Add(new ExcelExportableColumn
        //{            
        //    Field = nameof(FlowRun.ErrorMessage),
        //    Title = "Error"
        //});
    }

    public class FlowRun
    {
        public string FileName { get; set; }
        public string Type { get; set; }
        public long? FileSize { get; set; }
        public string Source { get; set; }
        public FileProtocol SourceFileProtocol { get; set; }
        public string ErrorMessage { get; set; }
    }

    public enum FileProtocol
    {
        Unknown,
        PIX,
        CIX,
        SS
    }
}

Bug report

Reproduction of the problem

(bug report only)
The label of the filter menu icon displays: “column filter menu settings”. In version 12.0.0 it included the name of the column field.

1. Run this example: https://blazorrepl.telerik.com/cKFaOPvO56rcaHqx16
2. Hover a filter icon in the Grid’s header with the mouse cursor.

Current behavior

(optional)
The label “column filter menu settings” appears.

Expected/desired behavior

The label text includes the column name, e.g., “Price column filter menu settings”.

Workaround:

https://blazorrepl.telerik.com/cUPYaPlO55EJNiKJ24

Environment

• Kendo/Telerik version: 15.0.1
• Browser: [all]

Bug report

Reproduction of the problem

(bug report only)
The clear button in the ComboBox (MultiColumnComboBox, etc.) currently renders as a span element and has the following attributes:

<span class="k-clear-value" role="button" tabindex="-1" title="Clear">
  ...
</span>

Excluding a button from the Tab key sequence does not hide it from a screen reader user. A screen reader user navigating by virtual cursor (using arrow keys or "next button" shortcuts) can and will still find this span element. When they arrive at it, they will hear "Clear, button." Naturally, they will press Enter or Space to activate it.

Current behavior

(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.

Expected/desired behavior

Make the span WCAG 4.1.2 compliant: https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/

<span 
  class="k-clear-value" 
  role="button" 
  tabindex="-1" 
  aria-label="Clear selection"
  title="Clear">
  ...
</span>

We can also consider completely hiding the span from screen readers, by rendering aria-hidden="true" on the span element, for example: 

<span 
  class="k-clear-value" 
  role="button" 
  tabindex="-1" 
  aria-hidden="true">
</span>

The Kendo Angular ComboBox implements a similar approach. This will be in accordance with WCAG 4.1.2, because aria-hidden="true" removes the element from the accessibility tree entirely, it is no longer parsed as an active UI component by screen readers.

TicketID:

(optional)
Provide the TicketID, where the bug report initiated.

Environment

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