Hi,

I am building a fleet management planning application using the Telerik Blazor Gantt component. I would like to display a vertical line or marker on the timeline to indicate today's date, similar to a "current time indicator" that visually separates past and future tasks.

I can't seem to find a feature like this in the documentation ? If not, is there a recommended workaround to achieve this ?

Thank you in advance for your help.

Description

When TelerikTextBox is used inside an HTML <form> with DebounceDelay configured, submitting the form (e.g. pressing Enter or clicking a submit button) races against the debounce timer. The ValueChanged callback has not yet fired by the time the form's onsubmit handler runs, so the component's internal state still holds the previous value — not the one the user typed.

The only workaround we found is to await Task.Delay(DebounceDelay + buffer) inside the submit handler to artificially wait for the debounce window to expire before reading the value. This is fragile, unreliable under load, and a clear code smell.

Expected behavior

When the form is submitted, TelerikTextBox should immediately flush its pending debounced value (i.e. fire ValueChanged synchronously or at least before the browser submit event propagates), so the calling component has the correct, up-to-date value at the moment the submit handler runs.

Alternatively, TelerikTextBox should expose a way to imperatively commit the current value (e.g. a public CommitValue() method, or a @ref-accessible flush API).

Steps to reproduce

1. Place a TelerikTextBox with DebounceDelay inside an HTML <form>.
2. Bind the value using Value + ValueChanged (two-way binding pattern).
3. Add a submit button or handle Enter via @onsubmit.
4. Type text quickly and immediately press Enter before the debounce window expires.
5. Observe that ValueChanged has not fired yet, so the submitted value is stale.

Minimal reproducible example:

@* SearchInput.razor *@
<form @onsubmit="HandleFormSubmit" @onsubmit:preventDefault>
    <TelerikTextBox Value="@_value"
                    ValueChanged="@HandleValueChanged"
                    Placeholder="Search..."
                    DebounceDelay="@DebounceDelay" />
    <button type="submit">Search</button>
</form>
<p>Submitted value: <strong>@_submittedValue</strong></p>
<p>Current internal value: <strong>@_value</strong></p>
@code {
    // Simulates a real-world DebounceDelay parameter passed in by a parent
    private int DebounceDelay { get; set; } = 300;
    private string _value = string.Empty;
    private string _submittedValue = string.Empty;
    private void HandleValueChanged(string value)
    {
        // This fires only after DebounceDelay ms have passed since the last keystroke.
        // If the user presses Enter before that window expires, this has NOT been called yet.
        _value = value;
    }
    private async Task HandleFormSubmit()
    {
        // PROBLEM: at this point, if the user typed and immediately hit Enter,
        // _value may still hold the OLD value because HandleValueChanged
        // hasn't been called yet (debounce hasn't fired).
        // WORKAROUND (bad practice — fragile, timing-dependent):
        // await Task.Delay(DebounceDelay + 50);
        // What we WANT: a way to tell TelerikTextBox "flush now"
        // so that _value is guaranteed to reflect what the user typed.
        _submittedValue = _value; // may be stale without the Task.Delay hack
        await Task.CompletedTask;
    }
}

To observe the bug without the workaround:

1. Remove / comment out the Task.Delay line.
2. Set DebounceDelay to something perceptible like 300 ms.
3. Type quickly in the box and press Enter immediately.
4. "Submitted value" will show the previous value, not what you just typed.

Current workaround

private async Task HandleFormSubmit()
{
    // Must wait for debounce to expire before _value is reliable
    if (DebounceDelay > 0)
        await Task.Delay(DebounceDelay + 50); // 50 ms buffer for safety

    await OnSubmit.InvokeAsync();
}

This is problematic because:

• It introduces an artificial, fixed delay on every form submit (even when no debounce is pending).
• The buffer (+50 ms) is arbitrary and can still fail under CPU load or slow devices.
• It makes the submit handler non-deterministic and hard to test.

What we are asking for

One of the following solutions:

1. Automatic flush on submit — TelerikTextBox should detect that the parent form is being submitted (via a form context or EditContext) and immediately fire ValueChanged with the current raw input value, bypassing the remaining debounce wait.

2. Imperative flush via @ref — Expose a FlushValue() / CommitValue() method on the component ref so the consumer can call it before reading the bound value:

@* Desired API *@
<TelerikTextBox @ref="_textBoxRef" ... DebounceDelay="300" />

private TelerikTextBox _textBoxRef;

private async Task HandleFormSubmit()
{
    await _textBoxRef.FlushValueAsync(); // fires ValueChanged immediately
    _submittedValue = _value;            // now guaranteed to be up-to-date
}

Given this markup:

<TelerikGrid Data="@PrognoseData" EditMode="GridEditMode.Incell" OnUpdate="@OnGridUpdate">
	<GridColumns>
		<GridColumn Title="Prijs/eenh." Field="PrognoseKostenModel.EenheidId" Width="120px">
			<EditorTemplate>
      @{
        var model = (PrognoseKostenModel)context;
        <TelerikDropDownList Data="@_eenheden" 
                             @bind-Value="@model.EenheidId" 
                             TextField="@nameof(PrijsEenheidDto.Sign)" 
                             ValueField="@nameof(PrijsEenheidDto.Id)" >
					<DropDownListSettings>
						<DropDownListPopupSettings Height="auto"/>
					</DropDownListSettings>
				</TelerikDropDownList>
      }
      </EditorTemplate>
			<Template>
        @{
          var model = (PrognoseKostenModel)context;
        }

          <span>@model.Eenheid</span>
      </Template>
		</GridColumn>
	</GridColumns>
</TelerikGrid>

So eg:

1. the initial value is "vkm2"
2. User selects "post" in dropdown
3. Dropdown is automatically closed, but value in grid remains "vkm2"
4. User clicks in different field in same row: OnGridUpdate is fired and value in grid changes to "post"

Any idea how to get OnGridUpdate immediately after the selection in the dropdown? 

In the multi-select input box, the tags are ordered according to the Data collection, not according to the collection bound to the Value property.

To reproduce the issue, edit the demo for the multi-select overview: https://blazorrepl.telerik.com/wgunGTOD22gxWC0722?_gl=1*m10ro*_gcl_au*MTUzMzExNDY1OC4xNzcwOTA4NDcwLjIwMjEwNDM5NzEuMTc3NjQxMzY3Mi4xNzc2NDEzNjc1*_ga*MjExNTkwMTk2Ny4xNzYyOTMyMjg1*_ga_9JSNBCSF54*czE3NzY0MTI0MjckbzM5JGcxJHQxNzc2NDEzODM5JGo0NSRsMCRoMA..

On line 14, swap values 1 and 6 in the SelectedHobbyIds list.

I expect the multi-select input to show [Football][Basketball], but instead it shows [Basketball][Football]. Note that the values in SelectedHobbyIds keep the initial order until a new item is selected.

For my scenario, the order for both collections, assigned to Data and Value, matter.

Is it something you can fix?

On a TelerikGrid, I allow users to filter, resize, reorder, hide and lock coumns.  I also have a button that lets them reset the grid state to the default settings.

This all works great except that the locked property of a grid column cannot be cleared under any circumstances that I can find.  When I set state to null using SetStateAsync(null), all the user customizations are reset back to defaults and the grid is re-bouund, but the user-locked columns stay locked.  Even if I trigger another manual rebind it does not update the locked status.  I have to do a full page refresh to get back to the normal state.

I have a demonstration of this behavior here:

https://blazorrepl.telerik.com/mUYyvRPU52qGBUkY21

To reproduce:

1. using the above Repl, change a couple of columns settings like width, order, sort or filter
2. using the drop down menu on the first column, set the state to locked
3. click on the Reset State button
4. notice that all settings are reset to original, except for the locked column

One thing I have done with some success is instead of setting GridState to null, I create a new empty grid state , create a ColumnState for every column and set the Locked property to false.  That will unlock the column.  However,  the default state of some of our colums is locked=true and  I don't have a way of programmatically determining which columns should be locked by default, so this method unlocks all columns, which is not what I want.

Is there a reason that the locked status is not reset with the other settings and is there any way to force them to reset? Alternatively, is there any way to get the default column status out of the grid at runtime?

I'm trying to save the page number and page size of a Grid to be later restored if the page with that grid is loaded again, and I have 2 issues with the 'All' size.

My Sizes list is

       private List<int?> PageSizes { get; set; } = [50, 100, 250, null];

If my grid has 76 rows and I select 'All' from the pager dropdown, the PageSize property is set to 76, but the dropdown shows 'All'.
If I then add a row to the grid, it is still showing 'All', but with page 1 of 2, where page 1 contains 76 items and page 2 contains 1 item.
Choosing 'All' again shows 1 page with 77 items.
That is my first issue, 'All' isn't all, but the current number of items

The second issue is when I set the Page and Pagesize with the values I saved earlier, the page size dropdown is showing '76', not 'All'. (76 isn't even a member of the PageSizes list. ). What value do I have set the PageSize to to force the dropdown to show 'All'?

Kind regards,

Kees Alderliesten

According to the documentation, Blazor DropDownTree Events - Telerik UI for Blazor, OnChange is invoked separately from ValueChanged to indicate the user has finalized a change, similarly to other components.

However, as far as I can tell, the OnChange event is never invoked, no matter what I try with the interface. Binding otherwise works fine.

Is this correct? I'm assuming since binding otherwise works fine, this could just be a documentation issue.

Using Telerik.UI.for.Blazor v13.1.0, DropDownTree is within a Razor component.

This is version 12.3.0

An application in production grew in memory consumption to several gigabytes and I've pinpointed the problem to the grid. The data of the grid is being updated frequently and each time the data of the grid is being updated with a new list, the memory goes up with hundreds of megabyte. Even when the page is reloaded with F5, the memory is not released. 

I ran some memory profiling in visual studio 2022 but could not find anything useful (I'm not good at profiling), except that the object that has the most diff between snapshots is SharedArrayPool+Partition<Byte>

In the end I had to force a Garbage Collection before setting the Data prop of the grid, which helps.

Perhaps there is a better (or a right) way to update the data of the grid? I've tried so many things now :D