Completed
Last Updated: 27 Sep 2019 05:58 by ADMIN
Release 1.3.0
Created by: ben
Comments: 7
Category: Grid
Type: Feature Request
10
Looking for feature parity between the Telerik React Grid Filter and Blazor for filtering.  This is one of our most used features of Telerik's grids...our grids often have 1000s of elements in them, being able to filter is a huge help to our users.
Completed
Last Updated: 10 Dec 2019 17:45 by ADMIN
Release 2.6.0
Created by: Eric
Comments: 4
Category: Grid
Type: Feature Request
10
At the moment, the editors in the grid have a fixed width. This makes them too narrow when the column is wide, or too wide when a column is narrow.
Declined
Last Updated: 29 Apr 2020 14:02 by ADMIN

 

@GridEditMode.Incell mode does not update automatically on row change when an editortemplate is used, as below

            <GridColumn Field=@nameof(ProjectRankingInfo.Ranking.Option2) Title="@Option2Title" Width="120px" Filterable="false">
                <EditorTemplate>
                    @{
                        currentItem = context as ProjectRankingInfo.Ranking;
                        <TelerikNumericTextBox Max="10" Min="0" Step="1" @bind-Value=@currentItem.Option2 />
                    }
                </EditorTemplate>
            </GridColumn>

 

one must click the update button for the update to occur,

 

Incell works fine and updates on row change for simple grid columns

ADMIN EDIT: SOLUTION: Read the details in the following article: https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes

ADMIN EDIT: this thread is rather long and I am adding the workaround offered by René here:

<TelerikGrid Data="@GridData" OnUpdate="@UpdateHandler"> ... </TelerikGrid>

 

In GridColumn
-------------------

<EditorTemplate>
   @{
         var item = context as MyModel;
         EditedItem = item;
         <TelerikNumericTextBox @bind-Value="@item.Number" OnChange="OnChangeItemHandler">
         </Telerik.Blazor.Components.TelerikNumericTextBox>
      }
</EditorTemplate>

 

In Code-Section
----------------------

protected MyModel EditedItem { get; set; }

protected void OnChangeItemHandler()
{
       var gridCommandEventArgs = new GridCommandEventArgs
       {
            Item = EditedItem
       };

        UpdateHandler(gridCommandEventArgs);
}

protected void UpdateHandler(GridCommandEventArgs args)
{
       var myModel = (MyModel)args.Item;

      // Save myModel to DB

      .....

}
Completed
Last Updated: 18 Feb 2020 13:08 by ADMIN
Release 2.8.0
Created by: Nick
Comments: 5
Category: Grid
Type: Bug Report
10

Hi,

This relates to my forum post here: https://www.telerik.com/forums/grid-selection-performance

I've noticed that the grid becomes very slow to select a row and to page when there is more than a little data being displayed. In the test project attached it can take 9 seconds to just select a row on the grid which is unworkable. Although we can reduce the amount of data and use paging in the real application we are developing it is still far too slow for Production use.

The test application has 2 pages, one using the Telerik grid and one using a simple component that draws an HTML table and handles selection. My aim was to prove that the problem is not down to Blazor re-rendering when a row is selected. The simple component it is around 0.3 seconds to select a row vs 9 seconds for the Telerik grid.

Obviously I appreciate that the Telerik grid is doing a lot more than the component, but it is not just Blazor that is causing this issue, it must be related to the work the grid has to do when a row is selected.

The attached project has 2 pages, one using the Telerik Grid one using my simple component. Click the load button to generate 300 rows of test data and then try clicking on a row. You can see the problem by running a performance trace in either Firefox or Chrome. The browser can even become unresponsive just clicking on a row, which you will appreciate is impossible to live with. If that doesn't happen you can try increasing the amount of data generated.

Thanks for your time!
Kind Regards,
Nick.

 

 

 

 

 

Completed
Last Updated: 23 Oct 2020 13:04 by ADMIN
Release 2.19.0
Created by: Jan Hindrik
Comments: 1
Category: Grid
Type: Bug Report
10

If I set grouping in OnStateInit, the GroupFooterTemplate does not have data for the aggregates I have set. If I group manually by dragging a column header, the data is there.

------

ADMIN EDIT: This stems from a framework behavior. The <GridAggregates> tag is a child component of the grid and as such, initializes after the grid. Since there is no event when all such child components are initialized the parent component cannot wait for them before starting to render and thus, it initializes before it can know what aggregates are defined.

Completed
Last Updated: 23 Feb 2023 07:22 by ADMIN
Release 2.30.0
Created by: Tom
Comments: 3
Category: Grid
Type: Feature Request
10

I would like to be able to customize the default format for dates and numbers that the grid has to, for example, use the current UI culture of my app.

*** Thread created by admin on customer behalf ***

Unplanned
Last Updated: 17 Nov 2021 16:01 by Nemo
Created by: Christian
Comments: 7
Category: Grid
Type: Feature Request
10
I would like to use Virtual Scrolling and Hierarchy for the Grid. 
Completed
Last Updated: 05 Aug 2024 13:31 by ADMIN
Release 6.1.0

---

ADMIN EDIT

Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:

At the end of this post you can find attached a sample project that showcases a more complex scenario where you may want to keep some rows selected but cancel the selection of others (in that sample, only one row with a given ItemType can be selected). It shows how you can get the index in the rendering of a particular row to use for a slightly modified version of the JS function.

@inject IJSRuntime _js

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">
    function uncheckGrid() {
        var checkboxes = document.querySelectorAll(".no-select .k-grid-checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }
</script>

<style>
    .no-select {
        cursor: not-allowed;
    }

    .no-select .k-checkbox {
        pointer-events: none;
    }
</style>

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             SelectedItems="@SelectedEmployees"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" OnCellRender="@OnGridCellRender" />
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Active)" />
    </GridColumns>
</TelerikGrid>

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

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

    private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();

    private void OnGridCellRender(GridCellRenderEventArgs args)
    {
        var product = (Employee)args.Item;
        if (!product.Active)
        {
            args.Class = "no-select";
        }
    }

    protected void OnSelect(IEnumerable<Employee> newSelected)
    {
        var validItemsToSelect = newSelected.Where(x => x.Active);
        SelectedEmployees = validItemsToSelect;
        if (validItemsToSelect.Count() < newSelected.Count())
        {
            _js.InvokeVoidAsync("uncheckGrid");
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = $"Employee {i}",
                Team = $"Team {i % 3 + 1}",
                Active = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public bool Active { get; set; }
    }
}

Completed
Last Updated: 14 Nov 2024 09:25 by ADMIN
Release 7.0.0
Created by: Torsten
Comments: 0
Category: Grid
Type: Bug Report
10

---

ADMIN EDIT

A sample reproducible is attached.

The issue stems from the inability of the System.Text.Json serializer to work with fields of type "Type" and the filter descriptors have such a field to denote the type of the column. Whether it will be possible for the grid to work around needs to be researched in more detail, because the limitation comes from the framework.

Might be the same problem as the following thread that also offers a few workarounds one can consider: https://feedback.telerik.com/blazor/1505237-set-deserialized-grid-state-in-onstateinit-handler-cause-error-on-open-filter-menu-of-column-on-ui

---

Unplanned
Last Updated: 01 Sep 2021 14:26 by ADMIN
Created by: BENAISSA
Comments: 0
Category: Grid
Type: Feature Request
10
I would like to customize the column menu for the Grid. Also, I want to change the default order of the Colum Menu built-in items. For example:
<ColumnMenuTemplate>
<CustomColumnMenuItem/>
<ColumnMenuFiltering/>
<ColumnMenuSorting/>
....
</ColumnMenuTemplate>
Unplanned
Last Updated: 05 Feb 2025 11:53 by ADMIN

I am resetting the Grid State by calling Grid.SetState(null). This doesn't reset ColumnState<T>.Locked boolean to false and the columns remain locked.

---

ADMIN EDIT

---

A possible workaround for the time being is to additionally loop through the ColumnStates collection of the State and set the Locked property to false for each column.

Example: https://blazorrepl.telerik.com/QTYmkpvb49c6CPxa42

Unplanned
Last Updated: 04 Dec 2024 13:35 by ADMIN
Created by: Jeff
Comments: 1
Category: Grid
Type: Feature Request
10
I would like to refresh the contents of the FilterMenu from my application code. 
Duplicated
Last Updated: 07 Feb 2024 11:23 by ADMIN
I would like to use customization options for the exported file when calling the export programmatically. 
Unplanned
Last Updated: 04 Sep 2023 08:44 by ADMIN

When the Virtualization feature is enabled, triggering Incell edit causes the Grid to scroll. When we scroll the edit is canceled. This happens when the row is partially visible.
https://www.screencast.com/t/zCJ9z9P83c

A more specific case is when you try to edit the last row. In case the editor height is bigger than the row height the Grid tries to scroll but there is no more data. The editor is closed and the item cannot be edited.
https://www.screencast.com/t/331cT4xxt

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

 

Completed
Last Updated: 20 Jun 2025 15:21 by Denny
Release 2025 Q3 (Aug)

When attempting to utilize the FilterMenuButtonsTemplate component, after selecting any of the defined action buttons (i.e., Clear, Filter, etc.), the selection will cause the page to refresh.

Steps:

  1. Proceed to the Telerik Blazor documentation page for Filter Menu Buttons Template within the Grid component.
  2. View the example for Using custom filter menu buttons.
  3. Ensure that this is the first time loading the component as the error will only occur on the example page when first initialized.
  4. Select the filter button within the “Price” column header.
  5. Press the “Clear” button.
Completed
Last Updated: 17 Sep 2019 12:17 by ADMIN
Release 2.0.0
Created by: Gordon
Comments: 0
Category: Grid
Type: Bug Report
9

When there are wide columns that produce a horizontal scrollbar, scrolling horizontally does not scroll the headers. It must.

WORKAROUND (see also the rules for the containing div that provides the scroll):

<style>
    .k-grid,
    .k-grid-container,
    .k-grid-content.k-virtual-content {
        display: inline-block;
    }
</style>

REPRODUCIBLE:

@using Telerik.Blazor.Components.Grid
 
<div style="width: 1200px; overflow-x: auto; overflow-y:hidden; border: 1px solid red;">
    <TelerikGrid Data="@trades" EditMode="inline" Pageable=true PageSize=10>
        <TelerikGridColumns>
            <TelerikGridCommandColumn width="100">
                <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
                <TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true" OnClick="UpdateItem">Update</TelerikGridCommandButton>
                <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" OnClick="CancelItem">Cancel</TelerikGridCommandButton>
            </TelerikGridCommandColumn>
            <TelerikGridColumn Field="@(nameof(Trade.TradeId))" Width=100></TelerikGridColumn>
            @*<TelerikGridColumn Field="@(nameof(Trade.TradeType))" Width=200></TelerikGridColumn>*@
            <TelerikGridColumn Field=@nameof(Trade.TradeType) Title="Trade Type">
                <EditorTemplate>
                    @{
                        var TradeToEdit = context as Trade;
                        if (TradeToEdit.TradeType == "POWER PHYSICAL")
                        {
                            <select class="form-control d-inline" style="height: 30px" onchange=@SaveItem value=@TradeToEdit.TradeType>
                                <option value="POWER PHYSICAL">POWER PHYSICAL</option>
                                <option value="GAS PHYSICAL"> GAS PHYSICAL</option>
                            </select>
                        }
                        else
                        {
                            <select class="form-control d-inline" style="height: 30px" onchange=@SaveItem value=@TradeToEdit.TradeType>
                                <option value="GAS PHYSICAL"> GAS PHYSICAL</option>
                                <option value="POWER PHYSICAL">POWER PHYSICAL</option>
                                <option value="POWER PHYSICAL">POWER FINANCIAL</option>
                            </select>
                        }
                    }
                </EditorTemplate>
            </TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.Company))" Width=500></TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.TradeDate))" Width=500></TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.BegTime))" Width=500></TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.EndTime))" Width=500></TelerikGridColumn>
        </TelerikGridColumns>
    </TelerikGrid>
</div>
 
@functions {
    public class Trade
    {
        public int TradeId { get; set; }
        public string TradeType { get; set; }
        public string Company { get; set; }
        public DateTime TradeDate { get; set; }
        public DateTime BegTime { get; set; }
        public DateTime EndTime { get; set; }
    }
 
    public List<Trade> trades { get; set; }
 
    protected override void OnInit()
    {
        trades = new List<Trade>();
        for (int i = 0; i < 25; i++)
        {
            trades.Add(new Trade()
            {
                TradeId = i,
                TradeType = "type " + i,
                Company = "company " + i,
                TradeDate = DateTime.Now.AddDays(i),
                BegTime = DateTime.Now.AddHours(-i),
                EndTime = DateTime.Now.AddHours(i)
            });
        }
    }
 
    void SaveItem()
    {
 
    }
 
    public void UpdateItem(GridCommandEventArgs e)
    {
 
    }
 
    public void CancelItem(GridCommandEventArgs e)
    {
 
    }
}

Completed
Last Updated: 17 Oct 2019 09:48 by ADMIN
Release 2.2.0

Steps to reproduce:
1.Create a Telerik Grid with SelectionMode=@GridSelectionMode.Multiple and a GridCheckboxColumn to select/unselect the rows. 
Also, bind the selected items to an IEnumerable collection and display the selected items in a <ul>
2.Click on Row1's checkbox - It selects the row, but not checking the checkbox
3.Click on it again- Now it unselects the row, but the checkbox is checked.
4.Click on the SelectAll checkbox in the grid header - It selects all rows, row checkboxes are checked, but the SelectAll checkbox in the grid header remains unchecked.
5.Click on the SelectAll checkbox again - All rows remain selected, row checkboxes remain checked, The SelectAll checkbox is now checked.
6.Click on the SelectAll checkbox again- All rows are unselected, row checkboxes are unchecked, The selectAll checkbox remains checked.

Another issue is, corresponding row checkbox remains checked on moving to next page eventhough the row is not selected. 
For eg,
1. a grid of 20 rows displays 10 items per page; Row 2 is selected and checkbox is checked
2. Move to page 2 - Row 12 checkbox is checked (but row 12 is not selected)

Please note that this discrepancy is only when using a checkbox column, otherwise the grid selection using Ctrl + Click works as expected.

Attached Screenshot of one of the issues

On clicking Row 2 checkbox again, result below

Completed
Last Updated: 16 Jan 2020 09:32 by ADMIN
Release 2.6.1
Created by: Nick
Comments: 8
Category: Grid
Type: Bug Report
9

Hi,

I've noticed some odd behaviour where the OnRead event is being called twice. Initially I thought it was my code, but I've got to a bizarre example where having two Console.WriteLine statements causes the repeated call, but having one doesn't!

In my testing with more code in the method it hasn't been consistent, so I'm not sure if it's a timing/threading issue. I have tested with the following:

  • Browser: Firefox and Chrome
  • VS: 16.4 Preview 5.
  • .Net Core: 3.1 Preview 2
  • Telerik: 2.3

My test code looks like this:

 

@layout EmptyLayout
@page "/testgrid"
<TelerikGrid Data=@GridData TotalCount=@Total
             Pageable=true PageSize=15
             OnRead=@ReadItems>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Id) Title="ID" />
        <GridColumn Field=@nameof(Employee.Name) Title="Name" />
    </GridColumns>
</TelerikGrid>
 
@code {
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;
 
    protected async Task ReadItems(GridReadEventArgs args)
    {
        Console.WriteLine("ReadItems 1");
        // Remove this line and ReadItems is only called once!!!
        Console.WriteLine("ReadItems 2");
 
        // Adding this makes no difference
        //await Task.Delay(1);
    }
 
    public class DataEnvelope
    {
        public List<Employee> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }
 
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

 

Any help appreciated!
Thanks.

 

Completed
Last Updated: 23 Apr 2020 10:29 by ADMIN
Release 2.13.0

Reproducible:

 

@using System.Collections.ObjectModel;

<div style="align-self:center;text-align:center" class="alert-danger">
    @errorMessages
</div>
<div style="align-self:center;text-align:center" class="alert-success">
    @successMessages
</div>
<TelerikGrid Data=@entitlementsExtended
             Pageable="true"
             Groupable="false"
             PageSize="@PageSize"
             OnUpdate="@UpdateHandler"
             Sortable="false"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="@nameof(EntitlementValueDTOExtended.Description)" Editable="false" />
        <GridColumn Field=@nameof(EntitlementValueDTOExtended.Value)>
            <EditorTemplate>
                @{
                    CurrentlyEditedEntitlement = context as EntitlementValueDTOExtended;
                    <div>
                        <TelerikDropDownList Data="@entitlementOptions" @bind-Value="CurrentlyEditedEntitlement.Value" Width="60px" PopupHeight="auto"></TelerikDropDownList>
                    </div>
                }
            </EditorTemplate>
        </GridColumn>

        <GridCommandColumn Width="300px">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    int PageSize = 10;
    public EntitlementValueDTOExtended CurrentlyEditedEntitlement { get; set; } = new EntitlementValueDTOExtended();

        //changing this to List<> works
    public ObservableCollection<EntitlementValueDTOExtended> entitlementsExtended { get; set; } = new ObservableCollection<EntitlementValueDTOExtended>();

    public static List<string> entitlementOptions = new List<string> { "I", "E" };

    public string errorMessages { get; set; } = "";
    public string successMessages { get; set; } = "";

    protected async override Task OnInitializedAsync()
    {
        IEnumerable<int> entitlements = Enumerable.Range(1, 50);

        //this is a simplified workaround for people needing nested models
        foreach (var entitlement in entitlements)
        {
            EntitlementValueDTOExtended entitlementExtended = new EntitlementValueDTOExtended();
            entitlementExtended.Id = Guid.NewGuid();
            entitlementExtended.Description = $"descr {entitlement}";
            entitlementExtended.Value = $"value {entitlement}";
            entitlementExtended.EntitlementTypeId = entitlement;

            entitlementsExtended.Add(entitlementExtended);
        }
        StateHasChanged();

        await base.OnInitializedAsync();
    }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        EntitlementValueDTOExtended item = (EntitlementValueDTOExtended)args.Item;

        var matchingItem = entitlementsExtended.FirstOrDefault(c => c.Id == item.Id);
        if (matchingItem != null)
        {
            matchingItem.Description = item.Description;
            matchingItem.EntitlementTypeId = item.EntitlementTypeId;
            matchingItem.Value = item.Value;
        }

        successMessages = $"updated grid on {DateTime.Now}";
        StateHasChanged();

    }

    public class EntitlementValueDTOExtended
    {
        public Guid Id { get; set; }
        public string Description { get; set; } = "";
        public string Value { get; set; } = "";
        public int EntitlementTypeId { get; set; } = 0;
    }

Completed
Last Updated: 02 Dec 2021 15:00 by ADMIN
Release 2.30.0
Created by: Arianis
Comments: 0
Category: Grid
Type: Feature Request
9

I would like to export custom data to excel, for example - the selected items.

 

<AdminEdit>

As an attached file, you can see a sample implementation that shows how you can export the Selected Items from the Grid to excel.

</AdminEdit>