Unplanned
Last Updated: 24 Jun 2025 19:21 by Albert

The scenario is:

In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.

A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.

Unplanned
Last Updated: 29 Jan 2025 06:43 by Rayko

I have a Grid with row selection and column virtualization. After selecting all rows and zooming out my browser to 80% or less, the column virtualization stops working - data is not loaded in the cells on vertical scroll.

Reproduction REPL

Won't Fix
Last Updated: 21 May 2025 15:26 by ADMIN

I use a custom filter row for the Grid where I have added a custom component holding the filter cell content. I am saving the Grid state upon change and restoring it on initialization.

I noticed that the custom filter component is initialized before the Grid state. As a result, there is an applied filter but the input in the custom filter component does not show it.

This behaviour was new since version 6.0.0. With 5.1.1 it doesn't appear.

Completed
Last Updated: 23 May 2025 08:33 by ADMIN
Release 9.0.0

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

Duplicated
Last Updated: 11 Apr 2025 07:02 by ADMIN

Please consider adding built-in support for a TextTruncationWithAction or TruncateWithButton mode on GridColumn components. This feature would display long text as truncated with ellipsis (...) and a button or icon to reveal the full content, such as in a modal or popover.

Why This Is Needed

In enterprise applications like ERP, cutover planning, or audit logs, we often display descriptions, notes, or comments that can span multiple lines. However:

 

  • Wrapping ruins compact grid layouts.
  • Truncating with ellipsis alone hides valuable content.
  • Users need quick, inline access to full text without leaving the grid.

 

Completed
Last Updated: 11 Apr 2025 15:26 by ADMIN
Created by: Ken
Comments: 1
Category: Grid
Type: Feature Request
2

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.

 

Declined
Last Updated: 11 Apr 2025 08:26 by ADMIN

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.


Completed
Last Updated: 09 Apr 2019 21:00 by ADMIN
Created by: Jeff
Comments: 2
Category: Grid
Type: Feature Request
1
Forgive me if this already exists but I can't seem to find a way to specify column widths for the Grid. If there is a way please include this documentation. If there isn't yet a way to do this then please consider this a request for that functionality. Thanks!
Completed
Last Updated: 23 Feb 2020 09:50 by ADMIN

I discovered "incell" editing mode on the grid, I love it!  It makes the UI very intuitive and quick to update individual fields. It also works great with a PATCH API endpoint.

One minor glitch with "incell editing".  If I click on a cell in a different row, it immediately takes the previous cell out of edit and puts the new cell in edit with a single click -- VERY cool.  But, if you click on a cell in the same row it takes the previous cell out of edit, but doesn't put the new cell in edit mode.  It would be cool if it worked the same as the "clicking in separate rows" functionality. 

 

Thanks,

Kenny

Duplicated
Last Updated: 02 Mar 2020 13:22 by ADMIN
Created by: Shaun
Comments: 2
Category: Grid
Type: Bug Report
1

Consider the following scenario:

<TelerikGrid Data="Animals" Sortable="true">
  <TelerikGridColumns>
    <TelerikGridColumn Field="Color"></TelerikGridColumn>
    <TelerikGridColumn Field="Breed"></TelerikGridColumn>
  </TelerikGridColumns>
</TelerikGrid>

@functions {
  public List<Animal> Animals { get; set; } = new List<Animal> { new Dog { Breed = "Sheepdog", Color = "Black" } };

  public class Animal { public string Color { get; set; } }
  public class Dog : Animal { public string Breed { get; set; } }
}

Everything renders fine for the grid until you attempt to sort by Breed, which results in the following exception:

System.ArgumentException: Invalid property or field - 'Breed' for type: Animal
   at Telerik.DataSource.Expressions.MemberAccessTokenExtensions.CreateMemberAccessExpression(IMemberAccessToken token, Expression instance)

 

Not sure what is going on under the hood here, but perhaps this could be fixed by looking at the type of the object, rather than the underlying list?    I'm aware that this can be fixed by changing the data source to List<Dog> , but I think this use case of using a base-class is useful for many dynamic scenarios (think dynamic columns, etc)

Declined
Last Updated: 18 Oct 2019 15:39 by ADMIN
    <TelerikGrid Data=@theViewModel.RowItems
                                 TotalCount=@theViewModel.TotalRecordCount
                                 Filterable=false
                                 Sortable=true
                                 Pageable=true
                                 EditMode="inline"
                                 PageSize=@theViewModel.PageSize>
                        <TelerikGridEvents>
                            <EventsManager OnRead=@ReadItems></EventsManager>
                        </TelerikGridEvents>
                        <TelerikGridColumns>
                            <TelerikGridColumn Field=@nameof(EmployeeTodo.Text) Title="Title" />
                            <TelerikGridColumn Field=@nameof(EmployeeTodo.CreationDate) Title="Date" />
                        </TelerikGridColumns>
                    </TelerikGrid>
Completed
Last Updated: 29 Jul 2019 10:36 by ADMIN
Release 1.5.0
Created by: Rick
Comments: 0
Category: Grid
Type: Bug Report
1

Repro steps:

  1. Go to https://demos.telerik.com/blazor-ui/grid/editing-inline
  2. Click Add
  3. Enter some data in all editable fields
  4. Click Update
  5. Go to the last page

Actual: The "Name" field is blank

Expected: All fields have the appropriate data

Completed
Last Updated: 02 Oct 2019 07:20 by ADMIN
Release 1.5.0

Reproducible below, expected results is that after editing the decimal field you'll get the data under the grid. Actual: either it does not get updated, or the value is always 0.

@using Telerik.Blazor.Components.Grid
 
 
<TelerikGrid Data=@MyData EditMode="incell" Pageable="true" Height="500px">
    <TelerikGridEvents>
        <EventsManager OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler"></EventsManager>
    </TelerikGridEvents>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
    </TelerikGridToolBar>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <TelerikGridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <TelerikGridColumn Field=@nameof(SampleData.SomeDecimal) Title="Some Decimal" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
</TelerikGrid>
 
@lastUpdateOnDecimal
 
@code {
    public void EditHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
 
        Console.WriteLine("Edit event is fired for column " + args.Field);
    }
 
    string lastUpdateOnDecimal;
 
    public void UpdateHandler(GridCommandEventArgs args)
    {
        string fieldName = args.Field;
        object newVal = args.Value; //you can cast this, if necessary, according to your model
 
        SampleData item = (SampleData)args.Item;//you can also use the entire model
 
        //perform actual data source operation here
 
        //if you have a context added through an @inject statement, you could call its SaveChanges() method
        //myContext.SaveChanges();
 
        if (fieldName == "SomeDecimal")
        {
            lastUpdateOnDecimal = $"decimal for {item.ID} updated to {newVal} on {DateTime.Now}";
        }
 
        var matchingItem = MyData.FirstOrDefault(c => c.ID == item.ID);
        if (matchingItem != null)
        {
            matchingItem.Name = item.Name;
        }
 
        Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value);
    }
 
    public void CreateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
 
        //perform actual data source operation here
 
        item.ID = MyData.Count;
        MyData.Add(item);
 
        Console.WriteLine("Create event is fired.");
    }
 
    public void DeleteHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;
 
        //perform actual data source operation here
 
        //if you have a context added through an @inject statement, you could call its SaveChanges() method
        //myContext.SaveChanges();
 
        MyData.Remove(item);
 
        Console.WriteLine("Delete event is fired.");
    }
 
    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public decimal SomeDecimal { get; set; }
    }
 
    public List<SampleData> MyData { get; set; }
 
    protected override void OnInit()
    {
        MyData = new List<SampleData>();
 
        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "Name " + i.ToString(),
                SomeDecimal = i
            });
        }
    }
}

 

Duplicated
Last Updated: 02 Mar 2020 13:26 by ADMIN
Created by: Mark
Comments: 1
Category: Grid
Type: Feature Request
1
It would be very help full to have the ability to summarize numeric columns in the Grid and display at the bottom of the Grid.
Completed
Last Updated: 02 Oct 2019 07:19 by ADMIN
Release 2.0.0
Created by: Ramon
Comments: 0
Category: Grid
Type: Bug Report
1

Reproducible

@using Telerik.Blazor
@using Telerik.Blazor.Components.Grid

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedItems"
             Pageable="true"
             Height="400px">
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="MyDelete" OnClick="DeleteSelectedAsync"
                                         Enabled=@(SelectedItems?.Count() > 0) Icon="delete">Delete</TelerikGridCommandButton>
        <TelerikGridCommandButton Enabled="false" OnClick="DeleteSelectedAsync">I must always be disabled</TelerikGridCommandButton>
</TelerikGridToolBar>
    <TelerikGridColumns>
        <TelerikGridCheckboxColumn />
        <TelerikGridColumn Field=@nameof(Employee.Name) />
        <TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
    </TelerikGridColumns>
</TelerikGrid>

@result

@if (SelectedItems != null)
{
    <ul>
        @foreach (Employee employee in SelectedItems)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    void DeleteSelectedAsync()
    {
        result = $"On {DateTime.Now} there are {SelectedItems?.Count()} items selected";
    }
    string result;

    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedItems { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }

        // select Employee with 3 through 5
        SelectedItems = GridData.Skip(2).Take(3).ToList();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

Duplicated
Last Updated: 02 Mar 2020 13:13 by ADMIN
Created by: Peter
Comments: 2
Category: Grid
Type: Feature Request
1
The scenario is that a user has set various filter and sort options in a grid and when they select an item in the grid and click a custom edit or add button, we navigate them to a separate page to complete the add or edit action. When they have completed the add or edit, we want to navigate them back to the page with the grid and restore whatever filter, sort, page, and page size they had set in the grid prior to navigating away. The page and page size are easy enough to do since the grid allows binding to those parameters but the grid does not allow you to bind to the sort or filter options.
Completed
Last Updated: 14 Nov 2024 09:27 by ADMIN
Release 7.0.0

You can work around this by disabling virtual scrolling with something like this:

ScrollMode="@(Data.Count() > 30 ? GridScrollMode.Virtual : GridScrollMode.Scrollable)"

Completed
Last Updated: 27 Mar 2020 09:20 by ADMIN
Release 2.10.0

Simplest repro code is below - expand a few rows and select items in them, or in the parent grid. I would expect that selection in each grid is independent, but the child grid seems to control the parent selection too, even though it is disabled.

 

 

<TelerikGrid Data="salesTeamMembers" PageSize="4" Pageable="true" @bind-SelectedItems="@SelectedItemsMainGrid" SelectionMode="@GridSelectionMode.Single">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="7" SelectionMode="@GridSelectionMode.None">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@foreach (var item in SelectedItemsMainGrid)
{
    <div>@item.Name</div>
}

@code {
    List<MainModel> salesTeamMembers { get; set; }
    public IEnumerable<MainModel> SelectedItemsMainGrid { get; set; } = Enumerable.Empty<MainModel>();

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 1; i < 16; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}

Duplicated
Last Updated: 22 Apr 2024 12:34 by ADMIN
Created by: Steve
Comments: 1
Category: Grid
Type: Feature Request
1

I would like to be able to edit both Date and Time in Grid editing mode.

===

Telerik edit: Possible since version 3.1.0 with through the column EditorType parameter.

Completed
Last Updated: 03 Jul 2020 10:57 by ADMIN
Release 2.11.0
With InCell edit mode, the selection must work only through the checkbox column