Grid OnRead .Clear() Issue

With the following component:

@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; } = new List<SampleData>();
    //public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
    private int page = 1;

    private void ReadItems(GridReadEventArgs args)
    {
        //MyData = new List<SampleData>();  //OK!
        //MyData = new ObservableCollection<SampleData>(); //OK!
        MyData.Clear();  //List: No update. ObservableCollection: System.StackOverflowException!
        Populate();
        StateHasChanged();
    }

    private void Populate()
    {
        foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        }))
        {
            MyData.Add(data);
        }
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

I see the issues in the comment fields.  Changing OnRead to async makes no difference.  

The workaround is to assign a new List or ObservableCollection instead of using .Clear()

Hello

The new adaptive toolbar I think doesn't follow the same style as other components, particularly scrollable tabs.

https://demos.telerik.com/blazor-ui/grid/adaptive

The UI scroll buttons shouldn't just disable, they just be hidden/removed from the UI altogether when they are not active (as it is pretty confusing to the user otherwise) - they should only appear when they need to appear. They also take up real-estate for no value.

Telerik already have the same concept in the UI for the scrollable-tabs seen here;

https://demos.telerik.com/blazor-ui/tabstrip/scrollable-tabs

So I see some inconsistency between the 2 UI's and think they should not appear as does on scrollable tabs.

Please consider adding a TooltipTemplate parameter to the GridColumn component to allow developers to define custom tooltips for each cell using the same template logic available in CellTemplate.

Why This Matters

In enterprise applications — especially in ERP dashboards, cutover schedules, and KPI reports — data often needs contextual clarification. While tooltips are supported globally or via title attributes, there’s currently no clean, built-in way to customize tooltips per column using templating logic.

Please consider adding new grid-level properties to control visual styling and editing behavior more intuitively:

• HeaderThemeColor
• ShowGridLines
• EditModeDisplay (e.g., None, ValueOnly, All, Auto)
  

These options would provide teams with greater flexibility to align grids with branding, accessibility, and user interaction standards.

Why This Is Valuable

Grids are the centerpiece of most enterprise applications — and users rely on visual consistency and responsive interaction. Today’s grids need to:

• Match branding and accessibility guidelines (dark/light, color accessibility).
• Visually separate data (e.g., grid lines on for financial reports, off for dashboards).
• Clearly communicate edit state (inline, batch, or value-only editing).
  

These settings would empower developers to deliver purpose-built grids without deep CSS overrides or workarounds.

Please consider adding support for an optional header row indicator that can display a conditional icon + themed tooltip, used to show non-field-level validation or status messages — especially during inline or in-cell editing, and ideally in batch edit scenarios.

Why This Is Needed

In enterprise applications — especially those with batch entry workflows, cutover planning, or financial approvals — validation needs often extend beyond just field-level errors. Common use cases include:

• Rule-level messages (e.g., “Only one Primary Owner allowed per group”).
• Cross-row or cross-field issues (e.g., overlapping dates, missing dependencies).
• Batch edit feedback (e.g., conflict indicators before submit).

Currently, there’s no clean way to show column-specific validation or guidance in a visual, inline way that:

• Doesn’t clutter the cell.
• Surfaces at the column level (just like a header).
• Feels native to the grid.

In many cases the header text of columns gets truncated to an ellipses if the columns aren't wide enough.  It would be nice if there was a global way to display a tooltip for each column header that is made up of the header text.  I know that I can do this using the column header template, but that will require that I create a template for every column in all of my grids. I'm looking for a way to have it work globally. This could be with a general header template that has context about the header Title, or just a Boolean flag to display column header tooltips.

Thanks,

Mike

Cuando agrego GridAggregates el exportador de excel no me permite dejar limpia la fila de Totales (FooterTemplates) para unicamente dejar el Dato me coloca la siguiente estructura: "aggregate_sum: X" y al remover el aggregate_sum de los archivos de recursos me deja el texto ": X" por lo que la cadena sigue sin quedar limpia.

De igual manera en mi grid view tengo la columna de Totales y no la agrega al archivo que se exporta los totales como se ve en la imagen:

There seems to be no System.Type that will allow a GridColumn to be specified with the 'FieldType' attribute to receive a TelerikTimePicker

typeof(DateTime) --> TelerikDateTimePicker

typeof(?) --> TelerikTimePicker

<TelerikGrid Data="@gridDataExpando" Width="100%" Sortable="false" Pageable="false" Resizable="true" ShowColumnMenu="false"
             ScrollMode="@GridScrollMode.Scrollable"
             Height="100%"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@UpdateHandlerExpando"
             OnEdit="@EditHandler">
   <GridColumns>
      @{
         var firstItem = gridDataExpando.FirstOrDefault();
         if (firstItem != null)
         {
            var dictionaryItem = firstItem as IDictionary<string, object>;
            foreach (var item in dictionaryItem)
            {
               if (!item.Key.Contains("Id"))
               {
                  <GridColumn Field="@(item.Key)" FieldType="@(this.GetDataType(item.Key))" Width="140px" DisplayFormat="{0:hh:mm:ss tt}">
                     <HeaderTemplate>
                        <span>@item.Key</span>
                    </HeaderTemplate>
                   </GridColumn>
               }
            }
         }
      }
   </GridColumns>
</TelerikGrid>

I am using a CheckBoxList filter menu and I am setting an initial filter through the OnStateInit. I noticed that when the Grid initializes and I check all the boxes, the Grid does not show any records. For reference, if no initial filter is applied and all CheckBoxes are selected, the Grid shows all the records.

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

===

ADMIN EDIT

===

As a workaround for the time being, you may create a custom Filter Menu.

Hi,

I have spent a while looking for the feature to move the Footer Template to the first line of the Telerik grid. Is this currently possible with a parameter I'm unaware of? How possible would this be to do if not. 

Kind Regards,

Elliot

Currently the GridSearchBox is able to search in all of the visible columns but when it comes to searching in multiple columns split by space it does not work. Or even two different strings in the same cell.

Example:

If from the above grid, I type in the search box, "LT" three products will be returned but if I type "LT LD" it should return two products but the results set comes with nothing.

I have implemented CustomSearchBox component as a solution in the interim to achieve this functionality. But it would be a worthwhile effort to have this functionality out of the box.

Thank you.

Sheraz

I suggest adding a FieldExpression property to the GridColumn so a developer would not need to create view models and templates for simple transformations of the existing model's properties. The field expression would be used for filtering and sorting as well. Its type would be Func<T, object> or Expression<Func<T, object>>.

   <TelerikGrid Data="@Persons">
            <GridColumns>
                <GridColumn FieldExpression="@(p => p.FirstName + " " + p.LastName)" />
            </GridColumns>
        </TelerikGrid>

Problem Statement:
We have the following blazor grid:

We have enabled the GridColumnMenuSettings

Now when we open the column chooser it does not disable for the last option.



When we don't have the GridCheckboxColumn then it works as intended



The last column option is disabled


Expected Result : We don't want the check box column to be shown in the column chooser and the last option to be unchecked in the column chooser needs to be disabled.

@* Use the Template to render the list of columns and add some custom styles *@ 

<TelerikGrid Data="@MyData"
             Pageable="true"
             PageSize="5"
             Width="700px"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             ShowColumnMenu="true">
     <GridSettings>
     
     <GridColumnMenuSettings Sortable="true"
                             Lockable="false"
                             FilterMode="@ColumnMenuFilterMode.None" />
 </GridSettings>
    <GridColumns> 

 <GridCheckboxColumn Width="80px" HeaderClass="header-select-all" />   
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
        <GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
        <GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
        <GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
    </GridColumns>
</TelerikGrid>

@code {
    public string TextboxValue { get; set; } = string.Empty;

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        FirstName = $"FirstName {x}",
        LastName = $"LastName {x}",
        CompanyName = $"Company {x}",
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

   So what I propose is a fixed width for a column of the grid (and locked) with the remaining columns auto-sizing.

In my situation, I have an action switch button where the client can delete a row, edit a row etc but the action code dropdown column needs to ALWAYS be the same width.  The rest of the columns should automatically size based on the existing behaviour.

   Now I have tried using the autosize for just that column, but I have to render the grid first, then run the autosize (which gives a fun show of resizing to the user) then all the columns become fixed width, but the vertical scroll bar doesn't move and stays in its initial position.

Grid with columns price1 and price2. Enter value in price1, switch to price2, enter value there, and editor is set to old value after async events finish.

The value entered in price2 is correctly set to the property, but the editor reverts to the previous value. If you escape edit mode of the cell, the value entered before the events finish will be shown.

On (fast) tabbing and entering values, this removes the first values entered before the async background events finish.

I tried reproducing the problem in REPL, but could not get the exact same behaviour. In our case no specific value is being set to price2, it just reverts.

https://blazorrepl.telerik.com/cxEzvQvE52q8aaAi27

How would you approach preventing the editor from being overridden by other cells' delayed events?

It would be good to have a Grid parameter like "ExpandDetailsOnSelection" for the Grid:

-> When the user selects a row, the DetailTemplate automatically expands - the DetailTemplate of the previous selected item is automatically collapsed

Advantages:

- no "+" button needed

- easy to integrate for 2-way-binding on SelectedItems (no need to use GridState and RowClick event)

Hi,

 it seems that grid.GetState() and FilterDescriptors, contains +1 "dummy" object.

- If it is by design, ok, BUT then, how to bind this filter descriptor to the ie TelerikFilter? = It displays that dummy object as it is, and confusing end users. Or how to "identify 100%" that is some kind of dummy value to be trashed?

How to reproduce:

1 run the repl demo

2 put "a" into the first colum(Name) filter

3 click button and observe the content of filter descriptors(serialized below the grid - RED is wrong, Green is expected as ok)

similar, but not the same(iam came from here):

https://feedback.telerik.com/blazor/1606424-manually-setting-the-grid-filters-via-the-grid-state-causes-multiple-composite-filters-on-one-column-where-only-one-filter-descriptor-for-that-member-was-set

Thanks for the tip, clarification, or removing that redundant values.

On grids with a lot of data there is a delay between when the grid is assigned the data to when the grid shows the data.  During this UI painting period, the NoDataTemplate is displayed for a second or two.

The grid should not show the NoDataTemplate unless the data source is loaded with an empty collection, not just while it is still trying to show the data.

Note: Having a generic message like in the documentation "No Data available / The data is still loading ..." is not satisfying our users. (Blazor Grid - No Data Template - Telerik UI for Blazor) These should really be two different states that can show different messages.

Thanks