The feature request is to be able to customize the GridCsvExportOptions and GridExcelExportOptions from the API methods -

• ExportToExcelAsync
• ExportToCsvAsync
• SaveAsExcelFileAsync
• SaveAsCsvFileAsync

It will be useful to be able to customize the columns and data to be exported.

===

Telerik edit:

A possible workaround is to click the built-in Grid export buttons with JavaScript. With this approach, you will be able to use the built-in export options and events. Here is a REPL example.

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 need to know which cell the user right clicked on so I can adjust my context menu. I need the cell value, the row model and the field of the column.

---

ADMIN EDIT

The following KB article shows a solution you can use immediately: https://docs.telerik.com/blazor-ui/knowledge-base/grid-which-cell-context-menu.

---

If after adding a new item to a grid with inline edit the save button is double-clicked (e.g. by accident) two new items are added instead of one. Right now, the only way to prevent this seems to be to check if an item is already contained in GridData at the top of the OnCreate-Handler and cancel if necessary.  If a unique ID is not available yet (because it is created by the database when saving at the end of the handler) this means every Property has to be compared to check for equality.  This is very annoying.

Please add a parameter "DisableWhileBeingHandled" to TelerikButtons and make this the default for the CommandButtons in a Grid. The Buttons should only accept clicks if the previous handling is finished.

Kind regards,

René

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

When the Grid is databound via OnRead event, the initially displayed aggregates are wrong and take into account the first page only.

A possible workaround is to bind the Grid in OnAfterRenderAsync -

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             Pageable="true">
    <GridAggregates>
        <GridAggregate Field="@nameof(Product.Name)" Aggregate="@GridAggregateType.Count" FieldType="@(typeof(System.String))" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name">
            <FooterTemplate>
                @context.Count
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Price)" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
        <GridColumn Field="@nameof(Product.Active)" />
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<Product> GridRef { get; set; }
    List<Product> GridData { get; set; }

    bool ShouldBindGrid { get; set; }

    async Task OnGridRead(GridReadEventArgs args)
    {
        if (!ShouldBindGrid)
        {
            return;
        }

        await Task.Delay(200); // simulate network delay

        DataSourceResult result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // workaround for initial Grid aggregates
            ShouldBindGrid = true;
            GridRef.Rebind();
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = "Product " + i.ToString(),
                Price = (decimal)rnd.Next(1, 100),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                Active = i % 3 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool Active { get; set; }
    }
}

Please add a feature to export the grid to a PDF file.

---

ADMIN EDIT

We have made two examples you can use for the time being to get a PDF document from the grid:

• server-side export - getting the grid data request and using some application code to generate the file: https://github.com/telerik/blazor-ui/tree/master/grid/pdf-export-server
• client-side export through Kendo libraries in the browser only: https://github.com/telerik/blazor-ui/tree/master/common/pdf-jpg-export-js

---

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.

In the TelerikGrid-control there seems to be a miss-alignment of the gridcell compared to their respective columnheaders.

This behavior is present on touch devices and Mac.

example of correct alignment in non-mobile browser:

example of incorrekt alignment in mobile browser (simulated via F12 tools, but same on real android device):

It looks like it maybe caused by the column where the vertical scrollbar is placed (far right). If i change the padding-right from 16px to 0px it aligns correctly again.

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.

---

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 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.

The Grid exits edit mode when expanding or collapsing rows in a hierarchy scenario. This only happens when OnStateChanged is set.

Test page that reproduces the behavior: https://blazorrepl.telerik.com/wIkJvdlo09hXCV8u03

On Hierarchy grids with Inline edit mode, I noticed that if a row is currently being edited and I try to expand the row to show the child grid an exception is thrown: "Error: System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm".

The problem stems from a validation tool inside the Grid EditorTemplate.

Feature Request

Currently, when a grid is rendered with 500 rows in a WASM application and expand/collapse action is initiated, it takes a few seconds to finish grouping and rendering. 

Steps to reproduce

1. Create a grid in WASM app.
2. Add 500 rows.
3. Do not enable paging.
4. Group by any field and initiate expand/collapse.
5. All rows are re-rendered which leads to a few seconds delay.

The header cell includes the following inner elements when the Grid is sortable:

However, if I disable sorting all those elements are omitted which is not consistent.

The problem is when filtering programmatically, the X that is normally used to clear the search box disappears.
I am following the Telerik guide here. https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox

The problem is actually demonstrated in the example from that page.

Filtering by typing:

Filtering programatically:

Thanks.