Completed
Last Updated: 17 Jan 2025 13:48 by ADMIN
Release 3.5.0

I set the GridColumn DisplayFormat="{0: yyyy-MM-dd}" and the data reflects that format. The default filter control doesn't. How can I make the control do that?

---

ADMIN EDIT

For the time being, the way to affect the filter behavior is through a custom filter template. The format for date pickers and numeric textboxes comes from the app culture settings (see more here). You may also want to Follow this idea for easier selection of a default filter operator and limiting the filter operators choices.

---

Completed
Last Updated: 13 Dec 2021 07:57 by Ironoak
Release 2.9.0
Created by: Michael
Comments: 10
Category: Grid
Type: Feature Request
26
At this point only the user can group the grid. I want to be able to set initial grouping with my code. This should also allow me to group by columns that are not visible/rendered at the moment.
Completed
Last Updated: 05 Jul 2024 10:57 by EMMANUEL
Release 2.30.0
Created by: Danilo
Comments: 4
Category: Grid
Type: Feature Request
26

I have a grid with the excell Export. Now I have two custom Export buttons on the Page (Over and under the Grid).

Can I somehow trigger the Grid Excell Export command Manually? 

---

ADMIN EDIT

Here is a workaround - a bit of JS to click the desired button and the second snippet shows how to invoke it from a blazor component and code.

 <script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

---

Completed
Last Updated: 07 Jun 2022 06:44 by ADMIN
Release 3.4.0
Created by: Michael
Comments: 2
Category: Grid
Type: Feature Request
26

I want to customize the appearance of the header of a certain column, and a bit of CSS backgrounds could help, but I can't do this with the HeaderTemplate alone, nor with content in it because of the padding the cells have.

So, I would like the ability to set the CSS class of the header cell of the column.

Completed
Last Updated: 27 Mar 2020 09:26 by ADMIN
Created by: René
Comments: 4
Category: Grid
Type: Feature Request
25
This is needed to be able to create quick filter buttons or a custom search panel.
Completed
Last Updated: 21 Dec 2022 06:46 by ADMIN
Release 3.1.0
Created by: Peter
Comments: 7
Category: Grid
Type: Feature Request
25

How do I get the filter menu to allow input of Date *and* Time for a DateTime column?

 

Completed
Last Updated: 05 Aug 2024 13:31 by ADMIN
Release 6.1.0
Since Telerik UI for Blazor 6.0.0 if I have defined aggregates and I load the Grid's data with async method the data never loads in the Grid. 
Completed
Last Updated: 27 Aug 2020 09:12 by ADMIN
Release 2.17.0

When a column is displayed conditionally, it's order is not preserved. In the code sample below, the ProductId column is the first column in the grid.  When you click the checkbox to hide the column, it is removed.  Click the checkbox again and the column reappears but it is the last column in the grid.

ADMIN EDIT: At the end of this post there is an attachment with a workaround through a custom column chooser.

<input type="checkbox" @onchange="@ToggleColumn" />

<TelerikGrid Data=@GridData>
    <GridColumns>
        @if (ShowColumn)
        {
            <GridColumn Field=@nameof(Product.ProductId) Title="Id" />
        }
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
            <Template>
                @(String.Format("{0:C2}", (context as Product).UnitPrice))
            </Template>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<Product> GridData { get; set; }
    bool ShowColumn = true;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                UnitPrice = (decimal)(i * 3.14)
            });
        }

        GridData = products.AsQueryable();
    }

    private void ToggleColumn(ChangeEventArgs args)
    {
        ShowColumn = (bool)args.Value;
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

Completed
Last Updated: 26 Jun 2021 16:59 by ADMIN
Release 2.26.0
Created by: Kelly
Comments: 1
Category: Grid
Type: Feature Request
24
I would like to display a message where rows would be displayed in grid, when there are no records returned from the data source. Basically, a message with graphics and hyperlink that direct the user to a page to enter a new record.
Completed
Last Updated: 09 Jan 2023 09:29 by ADMIN
Release 4.0.0 (18 Jan 2023) (R1 2023)
Created by: Joeri
Comments: 7
Category: Grid
Type: Feature Request
24

Hello,

First of all: thank you for implementing the Excel like filtering with the new CheckBox Filter! This was a feature that was highly sought after in our development team.

But there is one thing I am missing: the checkbox list has no option for sorting.

If we want to sort our filters now we have to implement the FilterMenuTemplate in every column that has filtering active (which are a lot) and define the list with filter options and filter it ourselves. 

Is this something that can be fixed easily?

---

ADMIN EDIT

We will probably sort ascending the values by default (out-of-the0box), and any other custom sorts should be implemented through the filter menu template.

---

Completed
Last Updated: 28 Dec 2023 08:50 by ADMIN
Release 5.1.0 (31 Jan 2024) (R1 2024)
Created by: Puneet
Comments: 4
Category: Grid
Type: Feature Request
24
Hi, I am looking for a Cell Click event in a grid to find out on which cell is exactly clicked.
Completed
Last Updated: 13 Jul 2020 07:41 by ADMIN
Release 2.15.0
Created by: René
Comments: 28
Category: Grid
Type: Feature Request
23

If I'm filtering a column containing enum values I expect a dropdown of available values to choose from (as it is the case when filtering a grid using telerik UI for .net core).

Unfortunately with Blazor Grids the filter for Enums displays a numberbox.  This is not usable since the user does not know the IDs for the enum values.

Please let me know how I can get the filter to let the user choose from the available enum values!

Completed
Last Updated: 24 Nov 2021 07:10 by ADMIN
Release 2.30.0
Created by: Edward
Comments: 5
Category: Grid
Type: Feature Request
22

It will be useful if the grid column state contains the Field parameter if such is specified.

This will make easier mapping the ColumnState entity to the actual column.

 

----

ADMIN EDIT

While this feature is implemented, you can get the Field of ColumnState columns using the workaround shown in this article: https://docs.telerik.com/blazor-ui/components/grid/state#get-current-columns-visibility-order-field

----
Completed
Last Updated: 24 Jun 2020 07:26 by ADMIN
Release 2.15.0

Because the shape of our business objects is not something your grid is easily bound to, we are attempting to generate ExpandoOjbects on the fly and bind to them.  In the picture below you can see that Id is not binding correctly.  Name is showing up because a column Template was used and that seems to work fine.  However, when attempting to use an EditorTemplate we get the RuntimeBinderException shown below.

 

 

 

 

 

@page "/dynamic-vendor"
@using System.Dynamic
@using Telerik.Blazor.Components.Grid

<div style="width: 800px; overflow-x: auto; overflow-y:hidden; border: 1px solid red; height:400px">
    <TelerikGrid Data="@expandoVendors" EditMode="inline" Pageable=true PageSize=10 SelectionMode="Telerik.Blazor.GridSelectionMode.Multiple">
        <TelerikGridColumns>
            <TelerikGridCommandColumn width="100">
                <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
                <TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
                <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
            </TelerikGridCommandColumn>
            <TelerikGridColumn Field="Id"></TelerikGridColumn>
            <TelerikGridColumn Field="Name" Title="Name" Editable="true">
                <Template>
                    @{
                        dynamic v = context as ExpandoObject;
                        <span style="white-space:nowrap">@(v.Name)</span>
                    }
                </Template>
                <EditorTemplate>
                    @{
                        dynamic v = context as ExpandoObject;
                        <input type="text" bind="@(v.Name)" />
                    }
                </EditorTemplate>
            </TelerikGridColumn>
        </TelerikGridColumns>
    </TelerikGrid>
</div>

@functions {

    List<ExpandoObject> expandoVendors { get; set; }

    protected override async Task OnInitializedAsync()
    {
        expandoVendors = new List<ExpandoObject>();
        var v1 = new ExpandoObject();
        v1.TryAdd("Id", "1");
        v1.TryAdd("Name", "Google");
        expandoVendors.Add(v1);

        var v2 = new ExpandoObject();
        v2.TryAdd("Id", "2");
        v2.TryAdd("Name", "Amazon");
        expandoVendors.Add(v2);
    }

}
Completed
Last Updated: 25 Feb 2022 10:34 by ADMIN
Release 3.1.0
Created by: Eric
Comments: 15
Category: Grid
Type: Feature Request
21

I would like to be able to customize the title in Editing Popup. 

 

<AdminEdit>

We plan to expose the following customization options:

  • Title,
  • Width
  • Height
  • MaxWidth
  • MaxHeight

</AdminEdit>

Completed
Last Updated: 10 May 2024 10:04 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)

Grid headers are misaligned if they are navigated in a scrolling scenario with a Frozen column.

===

ADMIN EDIT

===

The behavior affects the TreeList as well in a similar fashion. The misalignment is bigger when there is a frozen column but it is also reproducible without it in this demo.

Completed
Last Updated: 02 Apr 2020 08:21 by ADMIN
Release 2.10.0
Created by: NTMLegalSolutions
Comments: 3
Category: Grid
Type: Feature Request
20
I would like to request Frozen Columns/Headers in the Data Grid
Completed
Last Updated: 05 Jul 2023 10:50 by ADMIN
Release 4.2.0 (26/04/2023)
Created by: René
Comments: 16
Category: Grid
Type: Feature Request
20

With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.

Is there a way to scroll up by code until this is fixed ???

----

ADMIN EDIT

A sample solution is attached to the end of this post that shows how you can achieve this.

----

Completed
Last Updated: 01 Sep 2021 21:48 by ADMIN
Release 2.18.0
Created by: tilt32
Comments: 10
Category: Grid
Type: Feature Request
20

Based on row values, I want to style the entire row.

It could perhaps be exposed through something like a "<RowDescriptor>" element inside the <GridColumns>

//ADMIN EDIT: We plan to extend this item so that it includes not only row styling, but also the ability to add CSS classes to the cells, without having to use the Template.