After upgrading to 12.0.0, the Content does not change when clicking tabs. I always see the Content of the first tab.

My project targets .net8.

Description

When going fast over the Grid rows with the mouse cursor, the rows are highlighted after a delay. The delay is more noticeable on higher resolutions (2560x1440 or higher).

Steps To Reproduce

1. Hover the first Grid row and move the mouse cursor towards the last row (or vice versa).

Actual Behavior

In the app that targets .NET10 the row hover styles are applied with a delay, whereas in the app that targets .NET8 the hover styles are applied as soon as the mouse enters the boundaries of a row.

Expected Behavior

Similar performance in applying hover-related styles.

Browser

All

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

No response

Hello,

 there is inconsistency/behaviour/order in events of the Grid: OnStateInit and OnRead. Which leads to scenario with no clear sollution and would be nice to fix it, and how to solve it as "hotfix".
Also i think its not new in 12.x. release, it exists longer ;)

<TelerikGrid TItem="GData" @ref="gHL" OnRead=@GReadItems OnStateInit="@OnStateGHL">
...
<GridAggregates>
@if(1==2){...}
</GridAggregates>
@code{
protected async Task GReadItems(GridReadEventArgs args)
{
	**hack for C)
	if(gHL==null)return;//state init AVOID 2x call gread PRIOR OnStateInit
...// must be called:
args.AggregateResults = rr.ToDataSourceResult(args.Request).AggregateResults;
...
}
void OnStateGHL(GridStateEventArgs<GData> args) //or async Task doesnt matter
{
//default SORTing:args.GridState = new GridState<GData>
	{
		SortDescriptors = new List<Telerik.DataSource.SortDescriptor>
	{
		new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.DatPorizeni), SortDirection = Telerik.DataSource.ListSortDirection.Descending },
		//new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.Skupina), SortDirection = Telerik.DataSource.ListSortDirection.Ascending }

	}
	};
}
}
	

Problematic scenarios, single page, same grid:

A) when NO aggregates markup EXISTS at all
1. OnStateInit
2. OnRead  - gHL IS NULL
=OK

B) when EMPTY aggregates markup EXISTS
1. OnRead
2. OnStateInit
=FAIL
HOW to read and ui data with correct STATE?
https://www.telerik.com/blazor-ui/documentation/components/grid/state

cannot call gHL.rebind, also gHL is null
NONE initinal "sorting,filtering etc" is set, WRONG data,columns,displayed to the user


C) when SOME real aggregates markup EXISTS
1. OnRead
2. OnStateInit
3. OnRead
=partial FAIL("**hack used"), but managed by if(gHL==null)return


D) "hotfix" used with  GridAggregates="@( HasAggregates ? GridAggregatesTemplate : null )"
act as A or C, but gHL is always null, which is also bad againts C)

Expected:
ALWAYS only A) - First 1.OnStateInit THEN 2.OnRead. its the best one, without any additional hacks = UNIFY the event orders and behaviour.
OR
A) or C)
everything else is unmanagable.
 Especially when initial sorting "is must" and aggregates,columns and so on, are managed by user(non static)
B) is completly WRONG: incorrect event order of OnStateInit and OnRead
D) is againts C) (cannot detect reference of gHL)

related to:
https://feedback.telerik.com/blazor/1654029-onstateinit-does-not-fire-if-gridaggregates-exists-but-is-empty

https://www.telerik.com/forums/grid-onstateinit-event-and-onread-event-chaos

OR how to solve it generally = what is the way to LOAD gridState, and after that, LOAD Data by defined GridState?

Thanks

In our application we use some large datasets and present them in a TelerikGrid. We use WPF + Blazor Hybrid and noticed, that in some cases the memory usage of the Web View process grows up to some gigabytes.

Here a screenshot of the task manager with a lot of RAM usage for the web view.

Here a screenshot of the detached DOM elements after a two navigations. The container divs are not garbage collected.

I tracked down the issue to come from the TelerikGrid, because when I remove it from the pages, everything runs fine. I also removed all GridColumns and the issue is still present. In the developer tools I noticed that one of the parent div elements remains in memory every time I navigate back and forth.

I also created a blank Blazor WebAssembly Standalone application and added a simple instance of the grid. Here, the issue is also present. I attach the one blazor page that causes the issue.

I've tested all major versions from 5.1 upwards, every version is affected.

The Editor is missing some CSS styles when the EditMode is Div. As a result, the table resizers are misplaced and table cell borders are missing.

The workaround is to add those styles explicitly, until the issue is fixed.

@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@ToolCollection"
               EditMode="@EditorEditMode.Div" />

<style>
.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}
div.ProseMirror {
  position: relative;
  min-height: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}
div.ProseMirror:focus {
  outline: none;
}
.ProseMirror pre {
  white-space: pre-wrap;
}
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror li {
  position: relative;
}
li.ProseMirror-selectednode {
  outline: none;
}
li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}
.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
.k-editor-resize-handles-wrapper {
  position: absolute;
  visibility: hidden;
}
.k-editor-resize-handle {
  position: absolute;
  visibility: visible;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 100;
  width: 5px;
  height: 5px;
}
.k-editor-resize-handle.northwest {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}
.k-editor-resize-handle.north {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: n-resize;
}
.k-editor-resize-handle.northeast {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: ne-resize;
}
.k-editor-resize-handle.southwest {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: sw-resize;
}
.k-editor-resize-handle.south {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: s-resize;
}
.k-editor-resize-handle.southeast {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: se-resize;
}
.k-editor-resize-handle.west {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: w-resize;
}
.k-editor-resize-handle.east {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  cursor: e-resize;
}
.ProseMirror .tableWrapper {
  overflow-x: auto;
  margin: 1em 0;
}
.k-editor-resize-wrap-element {
  display: inline-block;
  position: relative;
}
.ProseMirror .row-resize-handle {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  transform: translate(0, 50%);
  height: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor-vertical {
  cursor: sn-resize;
  cursor: row-resize;
}
.k-editor-resize-wrap-element table td p,
.k-editor-resize-wrap-element table th p {
  margin: 0 auto;
}
.ProseMirror table {
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.ProseMirror td, .ProseMirror th {
  min-width: 1em;
  border: 1px solid #ddd;
  padding: 3px 5px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}
.ProseMirror th {
  font-weight: bold;
  text-align: left;
}
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px; top: 0; bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
/* Give selected cells a blue overlay */
.ProseMirror .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(200, 200, 255, 0.4);
  pointer-events: none;
}
</style>

@code {
    string EditorValue { get; set; }

    public List<IEditorTool> ToolCollection { get; set; } = new List<IEditorTool>() {
            new InsertTable()
        };
}

Description

In Firefox, there are occasions in which multiple items remain focused (k-focus class is not removed from the blurred item)

Reproduction (if bug)

1. Create a multiselect and set AutoClose="false".
2. Open the component and select a few items.
3. Close the component.
4. Open the component and select a new item.
5. Two items have the k-focus class.

Second related case:

1. Create a multiselect and set AutoClose="false".
2. Open the component and navigate up and down with the keyboard arrows.
3. Select an item.
4. The last focused item with the arrows is focused as well as the newly selected item.

REPL for reproduction

Expected (if bug)

Only one item should have the k-focus class at a time.

Browser (if bug)

Firefox

Broken Telerik UI for Blazor version (if bug)

3.5.0

Hi

I am loading a excel with column A1 as shown below. The text is in A1 and is a long text spanning several columns.

In the telerik spreadsheet component, it displays as shown below- inside A1 but not  with the same width as in the spreadsheet - i have to expand the column manually.

Is there a way to display it exactly as it is in the spreadsheet?

thanks
ranga raghuram

For example in DropDownList reflection is used for binding for TextField and ValueField.

As an additional option, I'd instead to be able to do DropDownList<FooBarModel>  and then FooBarModel implements a Telerik interface IDropDownListItem (for example but use your naming conventions)

I agree you shouldn't remove the option of using TextField / ValueField but I'd like to see it as an option.

Doing the same thing in something like DataGrid I agree would be a ton more work and we'd likely require using source generation.

It seems that Microsoft / the industry is consistently recommending to phase out the use of reflection and have invested a bunch in making source generation much less of a pain and developer friendly.

There are two related issues in this bug report:

1. TreeView does not allow horizontally scrolling when there are items that extend past the viewport
2. TreeView cuts off items when the browser is zoomed in

See REPL: https://blazorrepl.telerik.com/wwOHGPvi11wy1OBp06

Steps to reproduce:

1. Open and run the REPL.
2. Observe that the last deeply-nested tree item, Design20.......01 is not fully visible (if it is fully visible, just add more 0s in the middle). Specifically, the trailing "1" is not visible and cannot be scrolled to.
3. Zoom the browser to 200%.
4. Observe that the TreeView still does not allow horizontal scrolling to view any of the items cut off by the increased zoom.

When SchedulerGroupOrientation is set to vertical, increasing the height of the `SchedulerResourceGroupHeader` breaks the rendering of the Scheduler cells, which causes misalignment of the appointments. In my scenario, I want to have a Button and an Icon in the group header cell.

Reproduction example: https://blazorrepl.telerik.com/wJElGYvF02XSsN6j42

If you use the FloatingLabel, when you tab into the DateInput control, the cursor is set at the very end of the text of the date format. However, if you do not use the FloatingLabel, and you tab into the DateInput control, the placeholder text is selected.

Reproduction: https://blazorrepl.telerik.com/wQlvclOZ14jEKaXU38.

===

ADMIN EDIT

===

The report is initially opened for DateInput, however, it also targets the rest of the date pickers that are compatible with FloatingLabel.

I am resetting the Grid State by calling Grid.SetState(null). This doesn't reset ColumnState<T>.Locked boolean to false and the columns remain locked.

---

ADMIN EDIT

---

A possible workaround for the time being is to additionally loop through the ColumnStates collection of the State and set the Locked property to false for each column.

Example: https://blazorrepl.telerik.com/QTYmkpvb49c6CPxa42

When you type something in the grid searchbox, there will be a X at the end to clear the box.

However, if you restore the grid from previously stored state like localstorage, and if the box has value, the X is not there.

Thanks!

I am overriding the built-in Add command and setting an InsertedItem through the TreeList state. However, it looks like the the built-in validation is invoked twice and two validation Tooltips are displayed for the field.