Initial groups are duplicated in version 6.1.0. The OnStateInit event fires twice and the group descriptors are added twice. The problem occurs only when using <GridAggregates>.

The workaround is to clear the GroupDescriptors collection on OnStateInit.

@using Telerik.DataSource

<h2>No Aggregates</h2>

<p><code>OnStateInitCounter1:</code> @OnStateInitCounter1</p>
<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Groupable="true"
             OnStateInit="@OnGridStateInit1">
    <GridAggregates>

    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
    </GridColumns>
</TelerikGrid>

<h2>With Aggregates</h2>

<p><code>OnStateInitCounter2:</code> @OnStateInitCounter2</p>
<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Groupable="true"
             OnStateInit="@OnGridStateInit2">
    <GridAggregates>
        <GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
    </GridColumns>
</TelerikGrid>

<h2>With Aggregates and Workaround</h2>

<p><code>OnStateInitCounter3:</code> @OnStateInitCounter3</p>
<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Groupable="true"
             OnStateInit="@OnGridStateInit3">
    <GridAggregates>
        <GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
    </GridColumns>
</TelerikGrid>

@code {
    private int OnStateInitCounter1 { get; set; }
    private int OnStateInitCounter2 { get; set; }
    private int OnStateInitCounter3 { get; set; }

    private void OnGridStateInit1(GridStateEventArgs<SampleModel> args)
    {
        ++OnStateInitCounter1;

        args.GridState.GroupDescriptors.Add(new GroupDescriptor
        {
            Member = nameof(SampleModel.GroupName)
        });
    }

    private void OnGridStateInit2(GridStateEventArgs<SampleModel> args)
    {
        ++OnStateInitCounter2;

        args.GridState.GroupDescriptors.Add(new GroupDescriptor
        {
            Member = nameof(SampleModel.GroupName)
        });
    }

    private void OnGridStateInit3(GridStateEventArgs<SampleModel> args)
    {
        ++OnStateInitCounter3;

        args.GridState.GroupDescriptors = new List<GroupDescriptor>();
        // OR
        args.GridState.GroupDescriptors.Clear();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor
        {
            Member = nameof(SampleModel.GroupName)
        });
    }

    private List<SampleModel> GridData { get; set; } = new();

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 4; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"Name {i}",
                GroupName = $"Group {i % 2 + 1}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string GroupName { get; set; } = string.Empty;
    }
}

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 am using Grid with Cell Selection enabled and DragToSelect="true". If I define a Template inside the GridColumn tag and I add a div inside that, SelectedCellsChanged event handler does not trigger if I start dragging by clicking on the div or if I drop inside that one.

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

===

ADMIN EDIT

===

The only workaround for the time being is to disable the drag selection and let the user only select cells by clicking them. The cells will be selected even if the user clicks on the custom <div> element inside the template.

I have recently encountered an accessibility issue with the grid popup editor where the labels for the generated fields are not linked to their respective editor. It seems that the label does have a "for" attribute that is the same as the column title which I expect, but the Id of the input does not get set to the same thing. I can't see any option to make the association happen automatically.

===

ADMIN EDIT

===

A possible option for the time being is to use a custom popup edit form. You may either declare your desired custom content for the form and link the labels to their respective inputs or use the Form component with the field autogeneration feature which will automatically link the labels to the inputs.

My scenario is a lot similar to this one and I call SetStateAsync to exit the edit mode. In addition, my Grid is grouped on initialization. I noticed that each time I call SetStateAsync, the AggregateFunctions count of the GroupDescriptor increases and one more identical AggregateFunction is added to the same GroupDescriptor. This results in slowing the editing process.

Here is a simpler reproduction: https://blazorrepl.telerik.com/wekZmTPE35YpD8f504.

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.

Using the grid with OnRead event to fill data. I need to set the sortings at runtime, so I use also the OnStateInit event.

It all works fine because OnStateInit fires before OnRead and I set the sorting inside OnStateInit.

If I put an empty GridAggregates then OnStateInit fires after OnRead thus inside OnRead I don't have the sortings set.

===

ADMIN EDIT

===

As a workaround for the time being, do not include empty GridAggregates tag, only add them when you actually want to include some aggregate functions.

I previously raised an issue regarding the grid popup editor not linking the labels with the generated text inputs which was creating an issue with screenreaders. Since upgrading to version 7.1.0, I've seen that this issue has been fixed but in a way that breaks editor templates. Previously, the "for" attribute of the generated label was being set to the label text, but now everything is being set to a generated GUID.

This is fine for the generated fields since they can link the labels to the controls automatically (by setting the ID of the control to the GUID), but for templates, this means that we cannot link the generated label to the control since we cannot get access to the GUID in the template (as far as I know). Previously, when the "for" attribute on templates was the same as the label text, I could set the ID of the custom template control to the label text and the controls will be linked correctly.

===

ADMIN EDIT

===

• Not using Editor Templates, so the built-in editors are properly connected to their labels.
• Using a custom popup edit form, so you can control the rendering of the whole popup form.

I have a master-detail draggable Grid scenario in which both Grids have RowDraggable="true". When the user starts dragging a row from the DetailTemplate Grid, a JavaScript error occurs:

TypeError: Argument 1 ('node') to Node.replaceChild must be an instance of Node

After filtering a nullable DateTime column, the SelectAll checkbox in the GridCheckboxColumn becomes selected, and its functionality stops working correctly.

https://blazorrepl.telerik.com/mfalPIFS21fsWQ9p35

Please add support for automatic Grid table layout, which will allow column widths to be set by the browser, based on the cell content.

===

TELERIK EDIT:

This is a huge task with many implications. We require large-enough customer demand before we start exploring or implementing it.

Everyone who is interested, please drop a few lines here and share:

• What problems are you trying to solve?
• What benefits you want to achieve?
• Why the current Grid capabilities and behavior don't work for you?

Here are some thoughts on the matter:

HTML tables have two layout modes: auto and fixed. In auto layout, the table column widths depend on the content. In fixed layout, all column widths are equal or obey the set styles, no matter the content.

The Blazor Grid renders separate tables for its header cells and data cells. This allows the data area to scroll, while the header area remains visible at all times. The only reliable way to ensure column alignment between the two tables is to apply a fixed table-layout style. This results in the behavior, which we have described in the documentation.

The only way to have auto table layout in the Blazor Grid is to render the component as a single <table>, which is currently not available.

Possible workarounds include: 

• Set optimal fixed widths for all columns, or at least the ones with predictable content.
• Autofit the columns with non-predictable content, or simply set a bit larger widths to make sure the content doesn't clip or wrap.

Here is are a few links on the matter:

• How to wrap Grid headers
• Grid Width parameter
• Grid column auto-fitting
• Grid column width behavior

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

When the Grid PageSize exceeds the current data count and the InputType is Input, the Pager content cannot gain focus with the keyboard.

Here is a test page. A possible workaround is to switch the InputType at runtime. Then the user will be able to focus inside the Pager.

In some scenarios you may need a bit of extra code to get the current Grid item count.

<TelerikGrid Data="@GridData"
             Pageable="true"
             @bind-PageSize="@GridPageSize"
             Navigable="true">
    <GridSettings>
        <GridPagerSettings InputType="@GridPagerInputType"
                           PageSizes="@( new List<int?> { 2, 5 } )" />
    </GridSettings>

    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<SampleModel> GridData { get; set; } = new();

    private int GridPageSize { get; set; } = 5;

    //private PagerInputType GridPagerInputType { get; set; } = PagerInputType.Input;
    private PagerInputType GridPagerInputType => GridPageSize >= GridData.Count ? PagerInputType.Buttons : PagerInputType.Input;

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 3; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"Name {i}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

I have a Telerik Pager within a Telerik Grid. If I select a larger page size within the pager, then select a smaller size and do not scroll, the next time I open the pager, the dropdown portion opens in the wrong place. When I view the inspect tool, it appears that the CSS top value is not being updated when changing page sizes from bigger to smaller. Is this a Telerik limitation with the pager?
In the images, we select items per page from 10 to 25, and then we go immediately from 25 to 10 items per page. Without scrolling, we click into the drop down list again and we are able to replicate this issue.

Before: Items per page:     10 -> 25

After:    


Thank you in advance.

The Grid performance worsens progressively with each subsequent edit operation. Please optimize that.

Test page: https://blazorrepl.telerik.com/mJuHFNbb17FpJu9b54

Click on a Price or Quantity cell to start edit mode and tab repetitively to observe the degradation.

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.