Telerik Forums
UI for Blazor Forum
1 answer
54 views

Following your previous help on the resource column width issue, I have a similar question about row height in the timeline view.

I would like to reduce the height of the resource rows to display more resources on screen.

When I try to reduce the row height using CSS on .k-scheduler-row (e.g. min-height: 20px ), the rows do get smaller but the appointments become misaligned — their vertical position is calculated based on the original row height, not the new one.

I saw this was a requested feature but I didn't find updates on the forum.

Is there a way to achieve this ?

Thank you in advance for your answer.

Tsvetomir
Telerik team
 answered on 07 May 2026
1 answer
61 views

Hi,

I am building a fleet management planning application using the Telerik Blazor Scheduler with around 400 vehicle resources.

Context: I use the Timeline view with vertical grouping and it works perfectly. I also need a Day view, but vertical grouping in Day view is not an option for me — it generates 24 time slots per resource, which makes the page extremely heavy and causes it to crash with 400 resources. So I am using horizontal grouping for the Day view instead.

The problem: With horizontal grouping in Day view and many resources, the resource label columns are very small and the text becomes unreadable. After inspecting the generated HTML, I noticed an "overflox: hidden" rule on the resource label cells that seems to be constraining their width to the minimum available space rather than fitting the content.

I tried removing this CSS rule which makes the text readable, but it breaks the alignment between the resource labels and the scheduler body slots.

My questions:

  • Is there a native parameter to control the resource column width in this configuration?
  • If not, what is the recommended CSS approach to resize the columns without breaking the slot alignment?

Thank you in advance.

Ivan Danchev
Telerik team
 answered on 01 May 2026
1 answer
58 views

Hy,

In my web app in blazor .net 10 I use the TelerikQRCode component in one page set as follows:

The encoding is set to UTF-8 because the value contains special characters (such as emojis).

It seems that the component automatically adds some initial BOM bytes to the value, which is passed in a 'clean' way, i.e. without these initial bytes,

This creates a problem for me when I read the data with the scanner reader: I have no problems with the Honeywell scanner, but with the Datalogic scanner, when I read the automatically generated QR code, the string contains the following characters at the beginning: ï»¿

Is there a way to fix this issue directly with the Telerik component, without having to modify the configuration of all the Datalogic scanners?

Thanks,

Marco

Dimo
Telerik team
 answered on 30 Apr 2026
1 answer
138 views
Unfortunately, I can't install the Blazor components. I tried everything with no luck.


The automated installer cannot identify .NET version and asks for .Net core SDK 3 or later. BTW.. the detailed instructions link on this dialog points to a URL that returns 404.


PC Config: Windows 11 ARM64 (Parallels VM on MacBook M processor), VS 2026 ARM64, .NET 8,9,10 SDKs installed.
Maria
Telerik team
 answered on 22 Apr 2026
1 answer
38 views

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.

Dimo
Telerik team
 answered on 22 Apr 2026
1 answer
73 views

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
}

Dimo
Telerik team
 answered on 21 Apr 2026
1 answer
55 views

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? 

Dimo
Telerik team
 answered on 17 Apr 2026
1 answer
39 views

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?

Dimo
Telerik team
 answered on 17 Apr 2026
1 answer
60 views

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?

    Dimo
    Telerik team
     answered on 15 Apr 2026
    1 answer
    47 views

    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

     

    Hristian Stefanov
    Telerik team
     answered on 15 Apr 2026
    Narrow your results
    Selected tags
    Tags
    +? more
    Top users last month
    Hiba
    Top achievements
    Rank 1
    Iron
    Iron
    Rob
    Top achievements
    Rank 3
    Bronze
    Bronze
    Iron
    Max
    Top achievements
    Rank 1
    Veteran
    Iron
    Alina
    Top achievements
    Rank 1
    Rakhee
    Top achievements
    Rank 1
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Hiba
    Top achievements
    Rank 1
    Iron
    Iron
    Rob
    Top achievements
    Rank 3
    Bronze
    Bronze
    Iron
    Max
    Top achievements
    Rank 1
    Veteran
    Iron
    Alina
    Top achievements
    Rank 1
    Rakhee
    Top achievements
    Rank 1
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?