Good Morning,

I have recently started getting random and repeated Javascript errors when debugging my project using your controls for Blazor.  It is completely random (sometimes happens immediately at project start, sometimes when navigating to a new page, sometimes when interacting with a control).  It is ALWAYS the same error....

TypeError: Cannot read properties of undefined (reading 'visible') 

Message=
  Source=
  StackTrace:
  at __webpack_modules__.8219.constructor.onMouseEnter (https://localhost:44307/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?v=ITaQSsBTBmdJoUpPr2KiZ7JwhfKjwa7SGa6zvlv9kkU:50:1442661)

I am using the most current version of your product.  I have gone through your "Javascript Errors" page and have worked through all the suggestions.  Nothing resolves it.

This is becoming a giant time sink while trying to work on a project.  What can we do to get appropriate error handling on your end to prevent these issues?

Thanks

I get validation issues for the selection Checkboxes and the PageSizes dropdown as they do not have id or name attributes:

The behavior can be reproduced in the online demo: Blazor Data Grid - Overview

The OnBlur event does not fire after removing an item wehn using TagMode="@MultiSelectTagMode.Single"

I used this snippet in the Blazor REPL to reproduce the issue:

<p>@OnBlurMessage</p>
<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@SelectedCountries"
                    TagMode="@MultiSelectTagMode.Single"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" 
                    ClearButton="true"
                    AutoClose="false"
                    OnBlur="OnBlurHandler">
</TelerikMultiSelect>

@code {
    private List<string> Countries { get; set; } = new List<string>();

    private List<string> SelectedCountries { get; set; } = new List<string>();
    string OnBlurMessage {get; set;} = "";
    int i;

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");
        base.OnInitialized();
    }

    void OnBlurHandler()
    {
        OnBlurMessage = $"OnBlurHandler touched {++i} times";
    }
}

Steps to reproduce:

1. Select an item from the list then click out of the control.  Note that the comments shows "OnBlurHandler touched 1 times".
2. Click the x for the "1 item(s) selected" tag then click outside of the control.  Note that the comment still shows "OnBlurHander touched 1 times".
3. Click into the control then outside of control.  Note that the comment is updated to show "OnBlurHandler touched 2 times".

The OnBlur event should fire after step 2.

Attached is a short video clip of what I see.

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.

Hi,

We use compact sized grid all the time in our application.

However, with sorting and filtering enabled, the icons take too much space in the header cell and make the actual header text hard to read.

Please consider scale down those icons and reduce padding.

Thanks and best regards,

Peili

Demo: https://blazorrepl.telerik.com/mSOIQZvO51cwrorJ49

===ADMIN EDIT===

To reduce the size of the icons and the font in a Compact Grid, you can follow the approach from the knowledge base article How to make Compact Grid elements smaller.

The sort order for some strings should be in natural sort order.  

1.10 -> 1.13 should be following 1.9 in this example.

Hi Telerik Team,

when using the (currently) latest versions of VS (17.11.0) and Blazor 8.0.8 runtimes (and custom css theme version 8.2.0) I get the following error when running my project in debug mode:

TypeError: Cannot read properties of null (reading 'classList')
Stapelüberwachung:
 >  at e.addClass (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1122923)
 >    at v.resetCallout (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372516)
 >    at v.adjustCalloutPosition (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372355)
 >    at e.invokeComponentMethod (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1112736)
 >    at https://localhost:7038/_framework/blazor.webassembly.js:1:2878
 >    at new Promise (<anonymous>)
 >    at b.beginInvokeJSFromDotNet (https://localhost:7038/_framework/blazor.webassembly.js:1:2835)
 >    at Object.vn [as invokeJSJson] (https://localhost:7038/_framework/blazor.webassembly.js:1:58849)
 >    at https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
 >    at Ll (https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)

It looks like the problem has something to do with a function that wants to set the css "k-callout-e" class to some object.
The problem appears in js when e is null in the following method:
e.classList.add(t)

In this case e = null and t = "k-callout-e". It seems there's no null check for e and VS 2022 reports the problem.

The debugger in VS cannot be disabled for js content as it seems it's the same debugger for Blazor itself.
When hitting F5 to continue multiple times the projects keeps running until it hits the same problem again.

In my project I added a single "TelerikTooltip" component for Tooltips. I tried disabling it but still the same problem.
Maybe the js code is used for some other component.

If you need more information just let me know.

Regards,
Tom

Using Microsoft Visual Studio Professional 2022 (64-bit) - Current Version 17.11.0

Trying to create a new Telerik for Blazor project using Telerik C# Blazor Application Template.

Visual Studio freezes after I Name the project and click create. Only way to exit out of Visual Studio is to kill it through task manager.

Trying your project walk through for Blazor, RpsTrackingBlazor, After I add the nuget packages and try to add the using statement to _imports.razor as in the tutorial I get the error that the type or namespace name telerik could not be found.

Your project uses <TargetFramework>netcoreapp3.1</TargetFramework>

I also tried framework net8.0

Please expose the current data of the data bound select components when using OnRead. This will spare the need to cache data for the second time in-memory, or make a database request, or search by non-ID value when the app needs to obtain the full data item(s) for given component value(s).

This feature request is applicable to:

• AutoComplete
• ComboBox
• DropDownList
• MultiColumnComboBox
• MultiSelect

I know smart components are still in preview but please make this available as soon as you can in the editor component.  This would be a HUGE deal!

Github link

Smart Components

Hi,

Could it be possible to add an option to automatically add title property (containing text value) on every td?
We don't like 'multi-row' rows in a grid, so we use ellipsis with white-space no-wrap.. So it would be very useful to automatically add a title containing the text value of the cell (of course only for cells without a Template).
Otherwise we need to add a Template with a title to every column we already have, which is... 

Thanks in advance!

Greetings.

Good Day,

I really like the ability to drag and drop between controls. I though feel very limited, by Telerik enforcing both controls to have the same underlying data model (or interface) as per this article.

How to Drag and Drop Different Models between Multiple Grids - Telerik UI for Blazor

What would really be great, if the "OnRowDrop" event could accept other data models. I have no particular view on how exactly this should be implemented. It should work for server and WASM environments.

An example could be, that the "dragged" row is of type object and not <TItem> and it is left to implementation code deal with different data models being dropped on the control.

        //Something like this

        private void OnRowDropHandler(GridRowDropEventArgs args)

        {
            if(args.Item is IParentSampleData)
            {
                GridData1.Remove((IParentSampleData)args.Item);
                InsertItem((IParentSampleData)args);
            }
            else if (args.Item is SomeOtherModel)
            { 
                 //Whatever is needed...
            }
        }

Kind regards,

Peter

For God's sakes I've spent 20 minutes on your site trying to figure out how to download your demos. Every link takes me that USELESS TelererkUIForBlazorSetup.exe. Syncfusion my be the worst but at least you don't have to google something that should be so redundant it's everywhere.
I finally gave up and had to google it to find it on Github. Absolutely worst experience ever.

With
<TelerikNumericTextBox @bind-Value="myValue" Format="C" SelectOnFocus="true">
the content of the input is not selected upon focussing.  Without the Format="C" it is.

I use TelerikMultiSelect as a component for custom filter:

<FilterMenuTemplate>
    <TelerikMultiSelect Value="@(AlreadySelectedFilterValues(context.FilterDescriptor))"
                        OnRead="@OnReadWrapper"
                        ValueMapper="@ValueMapperWrapper"
                        TItem="@FilterItemDto" 
                        TValue="@TFilterValue"
                        ValueField="@nameof(FilterItemDto.Id)"
                        TextField="@nameof(FilterItemDto.Name)"
                        AutoClose="true"
                        Filterable="true"
                        ClearButton="true"
                        DebounceDelay="500"
                        OnChange="@((object newValue) => OnMenuFilterChange(newValue, context))"/>
</FilterMenuTemplate>

Trying to render already selected filters gives two "magic" items in context.FilterDescriptor in AlreadySelectedFilterValues:

These items appear only if TelerikMultiSelect is empty. If I select some from MultySelect these two items disappear and everything works as expected.

GridState has an empty list of FilterDescriptos.
AggregatedAccountNames - string? column.
TFilterValues can be int, int? or string, no matter, the same behavior.
TFilterItemDto - class with int? Id and and string Name fields.

As expected value I expect to have empty FilterDescriptos if nothing was selected.

Hi,

When I use TelerikDatePicker in my own component and the I use this component in Form, the validation for this input on the UI side doesn't work. The k-invalid class is not added, the appriopriate aria-invalid value is not set. The value on the TelerikDataPicker CascadedEditContext side is ok, an error message for this field appears after validation.

Hi, we are using a tile layout for charts and are having an issue where the tooltips for the second row of tiles are appearing at the bottom of the screen away from the chart or not at all. Then when we scroll back to the first row of tiles the tool tips are out of alignment as well. The following screen shot shows an example.

We have a component that has a tab strip and the tile layout with the following code

<TabStripTab Title="@tabName">
	@((MarkupString)tabHeading)
				
	<TelerikTileLayout Columns="6"
						RowHeight="225px"
						ColumnWidth="285px"
						Reorderable="true"
						Resizable="true"
						OnResize="@ItemResize"
						OnReorder="@ItemReorder"
						@ref="@TileLayout">
		<TileLayoutItems>
			@foreach (CustomChartViewModel chart in tab.Charts)
			{
				int colSpan = 2;
				int rowSpan = 2;

				<TileLayoutItem RowSpan="@rowSpan" ColSpan="@colSpan">
					<HeaderTemplate>
						<div style="text-align: right">
							<TelerikButton OnClick="@(() => onDeleteChart(chart.Id, tab.Id))">X</TelerikButton>
						</div>
					</HeaderTemplate>	
					<Content>
						<ChartComponent ViewModel="@chart" @ref="@charts[chart.Id]" />
					</Content>
				</TileLayoutItem>
			}
		</TileLayoutItems>
	</TelerikTileLayout>
</TabStripTab>

And then a chart component that renders the individual charts with a tooltip

<TelerikChart @ref="@ChartRef" Height="100%" Width="100%" OnSeriesClick="@OnSeriesClickHandler">
	<ChartTooltip Visible="true">
		<Template>
			<TelerikIcon Icon="information" />
                    @(context.Percentage.ToString("P", nfi))<br />
					@((context.DataItem as MyDataModel).toolTip)
		</Template>
	</ChartTooltip>
	<ChartSeriesItems>
		<ChartSeries Type="ChartSeriesType.Donut" Data="@Data" Field="value" CategoryField="category" ColorField="color">
			<ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
							   Visible="@ViewModel.ShowLabels"
							   Background="transparent"
							   Template="#= category #: #= value#">
			</ChartSeriesLabels>
		</ChartSeries>
	</ChartSeriesItems>

	<ChartTitle Text="@ViewModel.Name"></ChartTitle>

	<ChartLegend Position="ChartLegendPosition.Bottom" Visible="@ViewModel.ShowLegend"></ChartLegend>
</TelerikChart>