Please add support for a right-side filter panel (sidebar) that dynamically renders filter controls based on the grid’s visible columns and their editor templates. The panel would allow users to apply multiple filters at once, similar to SharePoint’s column filter experience — in a tall, narrow layout with an “Apply Filters” button.

Why This Matters

While column-level filters are useful, in real-world business apps:

• Users often want to set multiple filters at once without interacting with tiny filter icons.
• They need to see all available filters in one place — especially in cutover task lists, audit views, or reporting grids.
• This UI pattern is familiar from tools like SharePoint, Power BI, and Microsoft Lists.

Please add a built-in way to define a list of predefined filters (filter presets) within the ToolbarTemplate of a grid. This would allow users to quickly select a filter configuration, which is then automatically applied to the grid’s DataSourceRequest.

Why This Is InvaluablE

In enterprise apps with dense, multi-column grids, users often need to:

• Filter to common scenarios (e.g., “My Tasks”, “Due This Week”, “Unassigned Only”).
• Avoid re-entering the same filters repeatedly.
• See role- or context-based presets applied consistently

Currently, implementing this requires custom filter logic, state management, and manual data reloading — even though the concept is straightforward from a user’s perspective.

Please add a ToolbarTitle property to grid components, with an optional ToolbarTitleTooltip or ToolbarTitleAdornmentTemplate. This would allow developers to display a title with optional help text directly in the toolbar — giving users immediate context on the data being displayed.

Why This Is Valuable

In enterprise apps — particularly in areas like dashboards, scheduling, and ERP grids — users are often viewing:

• Similar grids across multiple tabs or modules
• Role-specific data views (e.g., “My Open Tasks”, “Org View Only”)
• Filtered subsets or critical cutover lists

Providing a toolbar-level title with a subtle help icon improves discoverability and reduces confusion — especially when filters or dynamic data shaping is in play.

Please consider extending the GridColumn component to include fine-grained header presentation properties, such as:

• HeaderAlignment (e.g., Left, Center, Right)
• WrapHeaderText (bool)
• HeaderTooltip or HeaderAdornmentTemplate
  

These enhancements would dramatically improve clarity and usability in complex data grids.

Why This Is Important

In enterprise-grade applications — like ERP dashboards, financial reporting, or cutover schedules — grids are dense and loaded with meaning. Users rely heavily on headers to interpret the data beneath, especially when:

• Column headers are long or require abbreviations.
• Users need contextual guidance without clutter.
• Alignment improves visual scanning and aesthetics.

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 grid that can have a large number of pages and is intended to be able to be viewed on a small width device.

The issue is that upon loading the grid and its data, the pager of the grid isn't changing how it's displayed even though it is supposed to be adaptive.

If the page is manually resized, only then does the pager correctly show as a dropdown.

I've reproduced this in a REPL, though it seems slightly inconsistent as opposed to my main project where it is able to be reproduced every time.

In the attached gif, notice that upon loading the page, the grid shows the pager as a list of numbers as it would if the page was a large width screen, but when resizing the page slightly, it is triggered to show the pages as a dropdown, which I believe is the intended behavior.

Is this issue known and is there a way to trigger the grid to redraw its pager after the data is loaded, or some other form of workaround for this without implementing a custom pager template?

REPL

I've customized the GridColumnMenu to only show the Column Chooser and assign Locked Columns (disabled all others, including Sortable):

<GridColumnMenuSettings
	FilterMode="@ColumnMenuFilterMode.None"
	Lockable="true"
	ShowColumnChooser="true"
	Groupable="false"
	Sortable="false"
	Reorderable="false">
</GridColumnMenuSettings>

I'm handling the sorting by clicking directly on the column header.   In that configuration, the menu icon is highlighted for the actively sorted column:

This is misleading because the user cannot affect the sorting via the column menu.  If Sortable = "false", I'd expect no indicator difference in the column headers.

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

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

The issue targets a Grid with cell selection and DragToSelect feature disabled where at least one column has Visible="false". With this configuration, when using Shift + Click to select multiple cells, the result is a mismatch in the cells that should be selected, after the position where the invisible column is placed.

Video reproduction attached. Reproduction code: https://blazorrepl.telerik.com/GyFuQwPf37H8riAM19.

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.

I am using InCell Grid editing. I want to prevent an edit cell from closing on certain condition. However, when I cancel the update with args.IsCancelled = true in OnUpdate, the user can still close the edited cell with Enter or Tab. This is inconsistent with inline or popup editing.

===

A possible workaround is to cancel both OnUpdate and the subsequent OnEdit.

https://blazorrepl.telerik.com/QykMHkks10APuDLQ47

@using System.ComponentModel.DataAnnotations

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Incell"
             OnEdit="@OnGridEdit"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Min)" />
        <GridColumn Field="@nameof(SampleModel.Max)" />
    </GridColumns>
</TelerikGrid>

<TelerikNotification @ref="@NotificationRef"
                     HorizontalPosition="@NotificationHorizontalPosition.Center"
                     VerticalPosition="@NotificationVerticalPosition.Top" />

@code {
    private TelerikNotification? NotificationRef { get; set; }

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

    private bool ShouldCancelOnEdit { get; set; }

    private int LastId { get; set; }

    private void OnGridEdit(GridCommandEventArgs args)
    {
        if (ShouldCancelOnEdit)
        {
            ShouldCancelOnEdit = false;
            args.IsCancelled = true;
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (SampleModel)args.Item;

        if (updatedItem.Min > updatedItem.Max)
        {
            NotificationRef?.Show(new NotificationModel()
            {
                ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
                Text = "Min must be smaller than Max"
            });

            args.IsCancelled = true;
            ShouldCancelOnEdit = true;
        }
        else
        {
            var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

            if (originalItemIndex != -1)
            {
                GridData[originalItemIndex] = updatedItem;
            }

            ShouldCancelOnEdit = false;
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = ++LastId,
                Name = $"SampleModel {LastId}",
                Min = Random.Shared.Next(1, 10),
                Max = Random.Shared.Next(11, 20)
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public int Min { get; set; }
        public int Max { get; set; }
    }
}

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.

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;
    }
}

When trying to make a cell selection using Shift + Click, the clicked cells are not correctly added to the selection range. When clicking on adjacent cells, the selection range gets misplaced resulting in deselection of the first selected cells.

Video: https://app.screencast.com/dsRpqw70tNVGi.

The Grid will throw a JavaScript error if the user wants to group and drops a column header near the edges of the grouping header or between existing group chips.

This is a regression in version 6.0.0.

REPL test page: https://blazorrepl.telerik.com/wouBdbvw36O4UaAR14

A possible workaround is to remove the empty space, which triggers the error, so that users cannot drop on it:

CSS

    .k-grid .k-grouping-header {
        padding: 0;
        border-bottom-width: 0;
        gap: 0;
    }

        .k-grid .k-grouping-header::before {
            margin: 0;
        }

    .k-grid .k-grouping-header .k-grouping-drop-container {
        margin: 0;
    }