Telerik Forums
UI for Blazor Forum
1 answer
23 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
    20 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
    1 answer
    25 views
    I am trying to leverage the TelerikMultiColumnComboBox  to tie into my API calls against a large dataset to return to the user results that match the filterString they are entering. Below is a reduced sample of what I am trying to achieve and what my current implementation is. The issue I am having is that when I hit the bottom, or scroll in the comboBox, the component calls OnRead for page 1 again and doesnt go to page 2, etc. I have validated this by console logging what the parameters are within OnRead but am struggling to figure out why it is not going to the next page. Any help would be appreciated. Thanks in advance!
    @page "/Test"
    
    @using Telerik.Blazor.Components
    @inject PreAwardJobSetupService preAwardSvr
    
    <TelerikMultiColumnComboBox TItem="Estimate"
                                TValue="Guid?"
                                TextField="Display"
                                ValueField="Id"
                                @bind-Value="SelectedEstimateId"
                                Filterable="true"
                                ScrollMode="DropDownScrollMode.Virtual"
                                PageSize="@PageSize"
                                OnRead="@OnEstimateLookup"
                                Width="100%"
                                ItemHeight="@ItemHeight"
                                ListHeight="@ListHeight">
        <MultiColumnComboBoxColumns>
            <MultiColumnComboBoxColumn Field="Revision" Title="Revision" Width="80px" />
            <MultiColumnComboBoxColumn Field="RevisionName" Title="RevisionName" Width="200px" />
            <MultiColumnComboBoxColumn Field="Opportunity_Title" Title="Opportunity Title" Width="200px" />
            <MultiColumnComboBoxColumn Field="Customer_Name" Title="Customer" Width="200px" />
            <MultiColumnComboBoxColumn Field="ApprovalStatus" Title="Approval Status" Width="100px" />
            <MultiColumnComboBoxColumn Field="OppStatus" Title="Opp Status" Width="100px" />
        </MultiColumnComboBoxColumns>
    </TelerikMultiColumnComboBox>
    
    @code {
        private Guid? SelectedEstimateId { get; set; }
        public string ListHeight { get; set; } = "268px";
        public int ItemHeight { get; set; } = 28;
        public int PageSize { get; set; } = 50;
    
        private async Task OnEstimateLookup(MultiColumnComboBoxReadEventArgs args)
        {
            string? filter = args.Request?.Filters?.OfType<Telerik.DataSource.FilterDescriptor>().FirstOrDefault()?.Value as string;
    
            if (string.IsNullOrWhiteSpace(filter))
            {
                args.Data = new List<Estimate>();
                args.Total = 0;
                return;
            }
    
            int page = args.Request?.Page ?? 1;
            int pageSize = args.Request?.PageSize ?? PageSize;
    
            var result = await preAwardSvr.GetEstimatesPagedAsync(filter, page, pageSize);
    
            args.Data = result.Estimates;
            args.Total = result.TotalCount;
        }
    }

    Ivan Danchev
    Telerik team
     answered on 14 Apr 2026
    1 answer
    14 views

    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.

    Dimo
    Telerik team
     answered on 14 Apr 2026
    1 answer
    24 views

    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

    Dimo
    Telerik team
     answered on 14 Apr 2026
    1 answer
    13 views
    I am using TelerikPanelBar and the background color will only appear once I collapse/expanded it at least one time. If there anyway that we can made the background color appear on initial load?
    Tsvetomir
    Telerik team
     answered on 13 Apr 2026
    0 answers
    20 views

    (Telerik.UI.for.Blazor v13.1.0)

    I was scratching my head over this one for a while. No matter what I tried, even though the data and initial value were valid, the control always initially showed "None" (or just blank, depending on DefaultText). Interestingly, the X close button also was visible, so the control "knew" the value was set.

    I tried all kinds of workarounds, delayed rendering, Rebind(), setting the value programmatically, nothing.

    I'm sharing the workaround that worked for me, hopefully save some other users some time. Turned out all I needed to do was to add a custom ValueTemplate:

    <TelerikDropDownTree Data="@myTreeData"
                         @bind-Value="selectedTreeValue"
                         DefaultText="None"
                         ShowClearButton="true">
        <ValueTemplate>
            @{
                var selectedItem = FindItemById(myTreeData, selectedTreeValue);
                <span>@(selectedItem != null ? selectedItem.Text : "None")</span>
            }
        </ValueTemplate>
    </TelerikDropDownTree>
    Jonathan
    Top achievements
    Rank 1
    Iron
     asked on 13 Apr 2026
    1 answer
    23 views

    I keep getting these errors after i updated to the latest release for a lot of charting components. This one is with ChartSeriesType.Area. The areas are there but don't have any coloring and are invisible.

     

    telerik-blazor.js:1 Error: <path> attribute d: Expected number, "M140.35 13 L NaN 13 NaN 173.2…".
    attr @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    _setEnd @ telerik-blazor.js:1
    step @ telerik-blazor.js:1
    t @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    setTimeout
    play @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    _redraw @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    loadFonts @ telerik-blazor.js:1
    preloadFonts @ telerik-blazor.js:1
    ad @ telerik-blazor.js:1
    createChart @ telerik-blazor.js:1
    createWidget @ telerik-blazor.js:1
    l @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    processJSCall @ blazor.web.js:1
    beginInvokeJSFromDotNet @ blazor.web.js:1
    Xr @ blazor.web.js:1
    (anonymous) @ invoke-js.ts:323
    Mc @ invoke-js.ts:82
    $func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f797
    $func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
    $func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
    $func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
    $func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
    $func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
    $mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
    Ko @ scheduling.ts:53
    callUserCallback @ dotnet.native.ykrnppwhq2.js:8
    (anonymous) @ dotnet.native.ykrnppwhq2.js:8
    setTimeout
    safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
    Mc @ scheduling.ts:63
    $func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
    $func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
    $func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
    $func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
    $func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
    $func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
    $func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
    $mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
    Ko @ scheduling.ts:53
    callUserCallback @ dotnet.native.ykrnppwhq2.js:8
    (anonymous) @ dotnet.native.ykrnppwhq2.js:8
    setTimeout
    safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
    Mc @ scheduling.ts:63
    $func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
    $func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
    $func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
    $func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
    $func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
    $func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
    $func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
    $mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
    Ko @ scheduling.ts:53
    Zo @ scheduling.ts:42
    8Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
    telerik-blazor.js:1 Error: <path> attribute d: Expected number, "M57 40.301 L NaN 40.301 NaN 2…".
    attr @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    trigger @ telerik-blazor.js:1
    geometryChange @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    _setEnd @ telerik-blazor.js:1
    step @ telerik-blazor.js:1
    t @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    setTimeout
    play @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    traverse @ telerik-blazor.js:1
    _redraw @ telerik-blazor.js:1
    redraw @ telerik-blazor.js:1
    setOptions @ telerik-blazor.js:1
    setWidgetOptions @ telerik-blazor.js:1
    setOptions @ telerik-blazor.js:1
    a @ telerik-blazor.js:1
    (anonymous) @ telerik-blazor.js:1
    processJSCall @ blazor.web.js:1
    beginInvokeJSFromDotNet @ blazor.web.js:1
    Xr @ blazor.web.js:1
    (anonymous) @ invoke-js.ts:323
    Mc @ invoke-js.ts:82
    $func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f797
    $func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
    $func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
    $func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
    $func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
    $func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
    $mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
    Ko @ scheduling.ts:53
    callUserCallback @ dotnet.native.ykrnppwhq2.js:8
    (anonymous) @ dotnet.native.ykrnppwhq2.js:8
    setTimeout
    safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
    Mc @ scheduling.ts:63
    $func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
    $func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
    $func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
    $func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
    $func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
    $func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
    $func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
    $mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
    Ko @ scheduling.ts:53
    callUserCallback @ dotnet.native.ykrnppwhq2.js:8
    (anonymous) @ dotnet.native.ykrnppwhq2.js:8
    setTimeout
    safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
    Mc @ scheduling.ts:63
    $func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
    $func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
    $func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
    $func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
    $func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
    $func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
    $func191 @ dotnet.native.53ez3dx5uy.wasm:0xc747
    $mono_wasm_execute_timer @ dotnet.native.53ez3dx5uy.wasm:0x10b011
    Zo @ scheduling.ts:38

    <TelerikChart @ref="_chart" >
    <ChartTooltip Visible="true" />
    <ChartSeriesItems>
    <ChartSeries Type="ChartSeriesType.Line" Size="3" Name="Estimate Goal" Data="@_seriesPlanned" >
    <ChartSeriesLabels Visible="true" Background="transparent" Position="ChartSeriesLabelsPosition.Top"  />
    <ChartSeriesMarkers Type="ChartSeriesMarkersType.RoundedRect" Size="0" Background="transparent"  />
    <ChartSeriesLine Color="blue" Width="5" ></ChartSeriesLine>
    </ChartSeries>
    <ChartSeries Type="@ChartSeriesType.Area" Color="dodgerblue" Name="Hours Awarded" Data="@_seriesReceived" MissingValues="ChartSeriesMissingValues.Interpolate">
    <ChartSeriesLine Color="blue" Width="1" Style="@ChartSeriesLineStyle.Normal" />
    </ChartSeries>
    <ChartSeries Type="@ChartSeriesType.Area" Color="teal" Name="Contract Changes" Data="@_seriesChanges" MissingValues="ChartSeriesMissingValues.Interpolate">
    <ChartSeriesLine Color="darkgreen" Width="100" Style="@ChartSeriesLineStyle.Normal" />
    </ChartSeries>
    <ChartSeries Type="@ChartSeriesType.Area" Color="salmon" Name="Orders" Data="@_seriesOrders" MissingValues="ChartSeriesMissingValues.Interpolate">
    <ChartSeriesLine Color="red" Width="2" Style="@ChartSeriesLineStyle.Normal" />
    </ChartSeries>
    </ChartSeriesItems>
    <ChartCategoryAxes>
    <ChartCategoryAxis Categories="@_xAxisItems" />
    </ChartCategoryAxes>
    <ChartLegend Position="ChartLegendPosition.Left" />
    </TelerikChart>

    Tsvetomir
    Telerik team
     answered on 13 Apr 2026
    1 answer
    25 views

    Hello,

    when typing a date quickly via keyboard into a TelerikDatePicker, the component behaves incorrectly in multiple ways:

    • Digits appended to the year segment — Instead of replacing the year value, newly typed digits are appended to the existing year (e.g. typing "2026" results in "20262026" or similar).
    • Cursor jumps back to the day segment mid-input — While typing the month or year, focus unexpectedly returns to the day segment, causing subsequent keystrokes to overwrite the wrong field.

    These issues make it nearly impossible to enter a date by typing it in one fluid motion, which is a common workflow for power users and keyboard-centric data entry.

    Steps to reproduce: (also reproducible on the official Telerik demo page).
    Click into the DatePicker so the day segment is focused.
    Type a full date quickly (e.g. 02022020 for 02.02.2020) without pausing between segments.
    Observe that the resulting date is incorrect — digits are misplaced or the cursor jumps unexpectedly.

    Best regards

    Dimo
    Telerik team
     answered on 08 Apr 2026
    1 answer
    38 views

    I have a situation where I need the:

    EditMode="GridEditMode.Incell"

    but I also need to have an event trigger when the row is updated:

    EditMode="GridEditMode.Inline"

    There is no mode that supports both, what are my options?

    I need to be able to trigger some action on a Cell by Cell update basis, but also need to trigger a specific action on a Row update.

    Thoughts?

    Robl

    Dimo
    Telerik team
     answered on 06 Apr 2026
    Narrow your results
    Selected tags
    Tags
    +? more
    Top users last month
    Chester
    Top achievements
    Rank 1
    Iron
    Simon
    Top achievements
    Rank 1
    Iron
    Douglas
    Top achievements
    Rank 2
    Iron
    Iron
    SUNIL
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Marco
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Chester
    Top achievements
    Rank 1
    Iron
    Simon
    Top achievements
    Rank 1
    Iron
    Douglas
    Top achievements
    Rank 2
    Iron
    Iron
    SUNIL
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Marco
    Top achievements
    Rank 3
    Iron
    Iron
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?