UI for Blazor version 5.0 improved the FileSelect Stream performance by removing legacy code that meant to support older .NET versions.

However, the Stream performance is still worse and the component works slower, compared to the standard Blazor InputFile.

Description

An input with type="password" should not have a default role. See:
w3c/html-aria#422
https://w3c.github.io/html-aria/#dfn-no-corresponding-role

Steps To Reproduce

Inspect the rendering of the password input in this demo: https://demos.telerik.com/blazor-ui/textbox/password

Actual Behavior

The element renders a role="textbox" attribute.

Expected Behavior

The element does not render a role="textbox" attribute.

Browser

All

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

No response

If the GridScrollMode.Virtual is enabled for the Grid, and the NoDataTemplate exceeds the height of the Grid container, a user can infinitely scroll inside the table even when there is no data and the template is displaying.

===ADMIN EDIT===

A possible workaround is to apply "overflow-y: hidden;" when the NoDataTemplate is shown: REPL link.

I am using a Blazor Telerik Grid and implementing a custom TelerikCheckBoxListFilter inside a FilterMenuTemplate.

When a user opens the "Name" filter menu and types a name quickly into the search/filter box, some of the text is removed automatically.

For example, if I type "1234567890" as input, without any delay - some of the letters will be cleared and it is showing as "1246890" in the filter search box. It could be because it is searching in real time, but the user input I am typing is not carried over correctly. See the attached screenshot taken from Telerik Demo site for the above said example.

Below is the column definition I am currently using:

<GridColumn Field="@nameof(Tenant.TenantName)" Title="Name" Width="*" FilterMenuType="@FilterMenuType.CheckBoxList">
    <FilterMenuTemplate Context="context">
        <TelerikCheckBoxListFilter Data="@Model.DistinctTenantNameList"
                                   Field="@(nameof(FilterTenantName.TenantName))"
                                   @bind-FilterDescriptor="@context.FilterDescriptor">
        </TelerikCheckBoxListFilter>
    </FilterMenuTemplate>
</GridColumn>

Hallo,

i want to Render PDF Files with the PDF Viewer Component.

The Data of the PDF is already fetched from the API when the PDF-Viewer starts Rendering the Loading animation appears and freezes.

After a few Seconds the PDF will be Rendered.

The size of the PDF File is about 5MB.

=====

TELERIK EDIT: Here is a possible workaround - replace the built-in PDF Viewer LoaderContainer with another one with a different animation Type.

<div class="pdfviewer-wrapper">
    <TelerikPdfViewer Height="600px" />

    @* With a Loading... label *@
    <TelerikLoaderContainer Class="pdf-loader-container"
                            OverlayThemeColor="@ThemeConstants.Loader.ThemeColor.Light"
                            Size="@ThemeConstants.Loader.Size.Large"
                            Visible="true" />

    @* Without a Loading... label *@
    @*<TelerikLoaderContainer Class="pdf-loader-container"
                                OverlayThemeColor="@ThemeConstants.Loader.ThemeColor.Light"
                                Visible="true">
            <Template>
                <TelerikLoader Size="@ThemeConstants.Loader.Size.Large"
                               Type="@LoaderType.Pulsing" />
            </Template>
        </TelerikLoaderContainer>*@
</div>

<style>
    .pdfviewer-wrapper {
        position: relative;
    }

    .pdf-loader-container,
    .k-pdf-viewer .k-loader-container {
        visibility: hidden;
    }

    .k-pdf-viewer:has(.k-loader-container:not([style*="none"])) + .pdf-loader-container {
        visibility: visible;
    }
</style>

@code {
    private byte[]? PdfViewerData { get; set; }
}

If the Start and End match exactly, the rendering of the Scheduler breaks in Day view. If another view is used, the event looks as if it is rendered on the previous day.

===

ADMIN EDIT

===

A possible workaround for the time being is to use a custom edit form and implement some kind of validation that prevents the user from selecting the same value for the Start and End of an event.

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é

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

In TelerikSelectBase that the DropDownList inherits, the FieldIdentifier is set only in the OnInitializedAsync method and therefore the FieldIdentitier is never updated. This can cause issues with validation as seen in this example:  https://blazorrepl.telerik.com/GyamPdlf37LXpPAW36.

To reproduce:

• Select the last item in the tree 7.Garden and change the value in the drop down list to Unsupported - the drop down list shows a red border.
• Select item 6.Garden from the tree. (Any item in the tree other than 1 will do) - I expect the drop down to not have the red border, yet is does.

For reference, in the TelerikInputBase, the FieldIdentifier is set in the SetParameterAsync and thus it is accordingly updated. See the TextBox behavior in the above sample.

Hi,

  Using VS code I tried to create a project using the latest Telerik UI for Blazor Productivity tools.  Updated 24-12-03

  The Error:

I would like to be able to disable one or more radio buttons in the RadioGroup.

=====

TELERIK EDIT

In the meantime, consider the following workaround, which relies on CSS and RadioGroup ItemTemplate.

<h4>Default Value Disabled</h4>

RadioGroupValue1: @RadioGroupValue1

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue1"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue1;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<h4>No Default Value</h4>

RadioGroupValue2: @RadioGroupValue2

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue2"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue2;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<style>
    .k-radio-list-item:has(.disabled-radio-option) {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
        gap: 0;
    }

    .disabled-radio-option {
        display: flex;
        align-items: center;
        align-content: center;
        gap: var(--kendo-spacing-1);
    }

    .k-radio-list-item:has(.disabled-radio-option) input:not(.fake) {
        display: none;
    }
</style>

@code{
    private int RadioGroupValue1 { get; set; } = 2;
    private int RadioGroupValue2 { get; set; }

    private List<RadioModel> Options { get; set; } = new List<RadioModel>
    {
        new RadioModel { Id = 1, Text = "Option 1" },
        new RadioModel { Id = 2, Text = "Option 2", Enabled = false },
        new RadioModel { Id = 3, Text = "Option 3" },
        new RadioModel { Id = 4, Text = "Option 4", Enabled = false },
        new RadioModel { Id = 5, Text = "Option 5" },
    };

    public class RadioModel
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public bool Enabled { get; set; } = true;
    }
}