DatePicker shows format string when no value is selected. If you have a form a DatePicker bound to a nullable DateTime, it will show the formatting string when no value is selected, instead of just showing an empty box.  This is very confusing to the end user compared to just an empty box. We have not found a way to change this.

Accessibility Insights for Web extension is flagging the k-grid-filter icon in the Grid Header labels.  Need workaround and remove the aria-label and replace with aria-role per guidance.  Under each of the red explanation marks is the filter icon on the column.  Running the Accessibility Insights for Web tool by Microsoft using Edge browser flags this code.

Please provide temporary workaround and permanent fix.

Blazor-UI 2.30 Release.

Blazor first steps bug in documentation, Primary="true" gives an error.

https://docs.telerik.com/blazor-ui/getting-started/server-blazor

Step 3 - Add a Telerik Component to a View

<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>

Primary = "true" gives an error with version 3, sb different for .net 6 and use ThemeColor

PopupHeight is no longer a valid property.

I can't find a way to reliably set focus after a tab change.
In the sample below it first sets focus based on the OnAfterRenderAsync code, but switching to tab 2 and then going back I can't get it to set focus again.

I suspect its because there is no render type of event on a specific tab that I can hook into?
I have tried javascript and blazor and can't seem to figure a way around it.


@page "/test"

<TelerikTabStrip ActiveTabIndex="@TabActiveIndex" Height="87vh" Class="ct-tabstrip" ActiveTabIndexChanged="@TabIndexChanged">
<TabStripTab Title="Orders Search">
<input type="text" @ref=orderSearchTextBox id="test"/>
<br />
<input type="text" />
<br />
<input type="text" />
</TabStripTab>
<TabStripTab Title="Orders Updated Today">
<text>Tab 2</text>
</TabStripTab>
</TelerikTabStrip>

@code {
private ElementReference orderSearchTextBox;
private int TabActiveIndex;


protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await orderSearchTextBox.FocusAsync();

}
}
public async Task TabIndexChanged(int NewIndex)
{
TabActiveIndex = NewIndex;
if (NewIndex == 0)
{
await orderSearchTextBox.FocusAsync();
}
}
}

I've determined that the TelerikDateTimePicker does not work properly on mobile devices when using AdaptiveMode.Auto. Attached are videos of the component's behaviour in both modes (None, and Auto).

Immediately after interacting with the fullscreen popup of the datepicker, I see this error in the console:

RAW:
telerik-blazor.js:50 Uncaught TypeError: r.isParent is not a function
    at p.isChild (telerik-blazor.js:50:1362352)
    at f.closePopup (telerik-blazor.js:50:1398427)
    at HTMLHtmlElement.onMouseDown (telerik-blazor.js:50:1397246)

Code:

@using Telerik.Blazor.Components
@using Telerik.Blazor

<TelerikFloatingLabel Text="Date & Time">
    <TelerikDateTimePicker Id="date-picker" @bind-Value="MyFormModel.Date" Max="@DateTime.Now.AddDays(1)"
                           Format="@DATE_FORMAT" AdaptiveMode="AdaptiveMode.Auto"
                           FillMode="@Telerik.Blazor.ThemeConstants.DateTimePicker.FillMode.Flat" />
</TelerikFloatingLabel>

@code {
    private FormModel MyFormModel { get; set; } = new FormModel();
    private const string DATE_FORMAT = "MM/dd/yyyy HH:mm";

    private class FormModel
    {
        public DateTime Date { get; set; }
    }
}

Notes:
- If we remove all of the parent components wrapping the DatePicker, it seems to function properly, but the errors remain in the console. This isn't a solution, however.

https://demos.telerik.com/blazor-ui/form/templates

When you edit in Telerik Repl, you get a warning message:

What was weird though, is when I ran it from directly from the link in the documentation, I didn't get an error.  I made one small change to the code (swapped line 54 and 55 (just seeing if I could change the rendering order, which I can) and then I saw this warning.  But any change to the code generates the warning.

Peter

Below issue was submitted 6 days ago. Currently developers are disabling/uninstalling Telerik extensions. I don't see any relies from Telerik so submitting another bug report hoping you'll reply to this one.

Please fix it!!!

Telerik UI for Blazor 3.6.0 breaks intellisense/typing in Visual Studio 2022 Version 17.3.4

Trying to group by some nullable column. Expanding the group returns the entire dataset instead of only these rows with value == null.

Use case: Some users can not be assigned to any Team. Want to group by Teams and see users not assigned to any Team.

Steps to reproduce:

• Using Virtual Scrolling with OnRead method.
• Have a nullable column e.g. string?.
• Trying to group by this column gives unexpected results.

Expected results:

Expanding the group by not assigning Teams returns only these users what doesn't have any teams by applying filtering.

Actual results:

 Expanding the group by not assigning Teams returns all users without filtering.

Code:

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

Scroll through the groups or expand them to load their data on demand

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="true"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
        <GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<object> GridData { get; set; }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        // sample data retrieval, see comments in the service mimic class below
        DataEnvelope<Employee> result = await MyService.GetData(args.Request);

        if (args.Request.Groups.Count > 0)
        {
            args.Data = result.GroupedData.Cast<object>().ToList();
        }
        else
        {
            args.Data = result.CurrentPageData.Cast<object>().ToList();
        }

        args.Total = result.TotalItemCount;
    }

    void OnStateInitHandler(GridStateEventArgs<object> args)
    {
        // set initial grouping
        GridState<object> desiredState = new GridState<object>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
            {
                new GroupDescriptor()
                {
                    Member = "Team",
                    MemberType = typeof(string)
                },
                new GroupDescriptor()
                {
                    Member = "IsOnLeave",
                    MemberType = typeof(bool)
                }
            }
        };

        args.GridState = desiredState;
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string? Team { get; set; }
        public bool IsOnLeave { get; set; }
        public decimal Salary { get; set; }
    }

    public class DataEnvelope<T>
    {
        public List<AggregateFunctionsGroup> GroupedData { get; set; }
        public List<T> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }

    public static class MyService
    {
        private static List<Employee> SourceData { get; set; }
        public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
        {
            if (SourceData == null)
            {
                SourceData = new List<Employee>();
                var rand = new Random();
                for (int i = 1; i <= 3; i++)
                {
                    SourceData.Add(new Employee()
                    {
                        EmployeeId = i,
                        Name = "Employee " + i.ToString(),
                        Team = "Team " + i % 100,
                        IsOnLeave = i % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
                }
                SourceData.Add(new Employee()
                    {
                        EmployeeId = 3,
                        Name = "Employee " + 3.ToString(),
                        Team = null,
                        IsOnLeave = 3 % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
            }

            await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app

            // retrieve data as needed, you can find more examples and runnable projects here
            // https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
            var datasourceResult = SourceData.ToDataSourceResult(request);

            DataEnvelope<Employee> dataToReturn;

            if (request.Groups.Count > 0)
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }
            else
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }

            return await Task.FromResult(dataToReturn);
        }
    }
}

Changing page size triggers multiple read requests.

Demo

Hi Team,

We are using Telerik Modal popup on the GridView edit click button.

This Modal Window moves out of the screen when user clicks on popup header click when there is a vertical page scrollbar and the scroll position is not top.

Can you please fix this bug? We implemented your workaround, but using that workaround with below link, after opening the popup, below screen automatically scrolls on top. This is not good user experience on lengthy page.

Expectation : Page scroll should stay with the previous position after opening the popup with scrollbar.

Modal Window moves away from the cursor on drag start when there is a vertical page scrollbar and the scroll position is not top (telerik.com)

Thanks,

Aarti Tare

I am handling the SelecteditemsChanged event of the Grid and when an exception is thrown in its handler, the ErrorBoundarydoes not catch it.

For reference, I tried attaching the same handler to a click of a button and it is successfully caught by the ErrorBoundary in this case.

Hi good morning. I am implementing a FileManager control, but by business logic only certain users have permission to rename files. So in the onEdit method I validate the permission and if it doesn't have it I send a DialogFactory and after that I send an args.IsCancelled = true. And at the end of the event if I click on another item (file) inside the folder. throw an exception:

public async Task OnEdit(FileManagerEditEventArgs args)
    {
        Dialogs.AlertAsync(message, "FileManager");
        args.IsCancelled = true;
    }

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Extensions.ReflectionExtensions.GetPropertyValue(Object target, String propertyName)
   at Telerik.Blazor.Components.TelerikFileManager`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ConvertToFileEntry(Object dataItem)
   at Telerik.Blazor.Components.FileManager.FileView.FileManagerFileViewBase`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ConvertToFileEntry(Object dataItem)
   at Telerik.Blazor.Components.FileManager.FileView.FileManagerListFileView`1.<>c__DisplayClass17_2[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<BuildRenderTree>b__8(RenderTreeBuilder __builder3)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Telerik.Blazor.Components.ListView.ListViewItem`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<BuildRenderTree>b__17_0(RenderTreeBuilder __builder2)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Microsoft.AspNetCore.Components.CascadingValue`1[[Telerik.Blazor.Components.ListView.IListViewCommandContainer, Telerik.Blazor, Version=3.3.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8]].Render(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Hello,

I am using the TelerikSkeleton component for Blazor and noticed the pulse and wave animations are not working. It seems animation also does not work in your examples here, while it works in Telerik REPL (that's where I could identify the issue)

For my application, I made my custom theme with ThemeBuilder and then imported it into my project as instructed. Going through the css file, I found where the bug is:

How it was:

.k-skeleton-pulse .k-skeleton {
    animation:k-skeleton-pulse 1.5s ease-in-out .5s infinite
}

After my changes:

.k-skeleton-pulse.k-skeleton {
     animation:k-skeleton-pulse 1.5s ease-in-out .5s infinite
}

The only thing I did was I removed the space between the two classes and now it works.

Note: I selected "WebAssembly" as application type, but I am actually using it for both a Razor class library and a .NET MAUI Blazor application.

Hi. VS 2022 version 17.2.4, C#, Windows 11

I thought I'd have a look at blazor and selected the Telerik version in the new projects window and ran through the wizard.

I selected the dashboard look, .net 6, teleric UI for blazor 3.4.0 (Dev) and to enable localization, which is what I assume to be the cause of the following error message. There were no other hints and as I've never tried blazor or telerik for blazor I don't know if there's anything missing from the solution. If I ran another wizard without localization there was no error.

An error occurred while running the wizard.

Error executing custom action Telerik.Blazor.VSX.Actions.CopyBlazorLocalizationResourcesAction: System.Collections.Generic.KeyNotFoundException: The given key was not present in the dictionary.
   at System.ThrowHelper.ThrowKeyNotFoundException()
   at System.Collections.Generic.Dictionary`2.get_Item(TKey key)
   at Telerik.Blazor.VSX.Actions.CopyBlazorLocalizationResourcesAction.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap project)
   at Telerik.VSX.WizardEngine.ActionManager.ExecActions()

In my @code {

TelerikGrid<ClientViewDto>? MainGrid;

When user click into the date picker textbox, the placeholder value is changed to what's set to "format" for the date picker. For example, I have the following configured:

<TelerikTimePicker Placeholder="dd/mm/yyyy" Format="dd/MM/yyyy"></TelerikTimePicker>

The control will display "dd/mm/yyy" in the textbox, however, when user click into the textbox, the placeholder value changes to "dd/MM/yyyy".

It seems I'm missing Height, MinHeight, and MaxHeight settings here. 

When re-visiting a drop down each selected option is visually indicated, but not to a screen reader user. E.g.:

Figure: Selected options are highlighted but this is not indicated to a screen reader