The Grid performance worsens progressively with each subsequent edit operation. Please optimize that.

Test page: https://blazorrepl.telerik.com/mJuHFNbb17FpJu9b54

Click on a Price or Quantity cell to start edit mode and tab repetitively to observe the degradation.

Currently, when a user exports the Grid to Excel/CSV/PDF,  the export file is generated as a base64 string.

Please provide the file as a byte[] instead of a base64 string for better performance.

I have a Telerik Pager within a Telerik Grid. If I select a larger page size within the pager, then select a smaller size and do not scroll, the next time I open the pager, the dropdown portion opens in the wrong place. When I view the inspect tool, it appears that the CSS top value is not being updated when changing page sizes from bigger to smaller. Is this a Telerik limitation with the pager?
In the images, we select items per page from 10 to 25, and then we go immediately from 25 to 10 items per page. Without scrolling, we click into the drop down list again and we are able to replicate this issue.

Before: Items per page:     10 -> 25

After:    


Thank you in advance.

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

In many cases the header text of columns gets truncated to an ellipses if the columns aren't wide enough.  It would be nice if there was a global way to display a tooltip for each column header that is made up of the header text.  I know that I can do this using the column header template, but that will require that I create a template for every column in all of my grids. I'm looking for a way to have it work globally. This could be with a general header template that has context about the header Title, or just a Boolean flag to display column header tooltips.

Thanks,

Mike

Please add support for automatic Grid table layout, which will allow column widths to be set by the browser, based on the cell content.

===

TELERIK EDIT:

This is a huge task with many implications. We require large-enough customer demand before we start exploring or implementing it.

Everyone who is interested, please drop a few lines here and share:

• What problems are you trying to solve?
• What benefits you want to achieve?
• Why the current Grid capabilities and behavior don't work for you?

Here are some thoughts on the matter:

HTML tables have two layout modes: auto and fixed. In auto layout, the table column widths depend on the content. In fixed layout, all column widths are equal or obey the set styles, no matter the content.

The Blazor Grid renders separate tables for its header cells and data cells. This allows the data area to scroll, while the header area remains visible at all times. The only reliable way to ensure column alignment between the two tables is to apply a fixed table-layout style. This results in the behavior, which we have described in the documentation.

The only way to have auto table layout in the Blazor Grid is to render the component as a single <table>, which is currently not available.

Possible workarounds include: 

• Set optimal fixed widths for all columns, or at least the ones with predictable content.
• Autofit the columns with non-predictable content, or simply set a bit larger widths to make sure the content doesn't clip or wrap.

Here is are a few links on the matter:

• How to wrap Grid headers
• Grid Width parameter
• Grid column auto-fitting
• Grid column width behavior

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.

Consider the following scenario:

1. A user focuses a specific Grid cell through keyboard navigation.
2. The user tabs out of the Grid and then tabs back in.

In this case, the Grid should focus the last focused cell in step 1. Instead the Grid focuses the first header cell.

1. Go to https://demos.telerik.com/blazor-ui/grid/keyboard-navigation 
2. Click a data cell.
3. Click `Tab` or `Shift + Tab` to exit the Grid data area.
4. Click `Shift + Tab` or `Tab` to go back to the Grid data area.
5. Compare with https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation 

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.

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

The scenario is:

• Grid popup editing
• The model class has no parameterless constructor
• The Grid is using a popup <FormTemplate>

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.

Cuando agrego GridAggregates el exportador de excel no me permite dejar limpia la fila de Totales (FooterTemplates) para unicamente dejar el Dato me coloca la siguiente estructura: "aggregate_sum: X" y al remover el aggregate_sum de los archivos de recursos me deja el texto ": X" por lo que la cadena sigue sin quedar limpia.

De igual manera en mi grid view tengo la columna de Totales y no la agrega al archivo que se exporta los totales como se ve en la imagen:

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

I previously raised an issue regarding the grid popup editor not linking the labels with the generated text inputs which was creating an issue with screenreaders. Since upgrading to version 7.1.0, I've seen that this issue has been fixed but in a way that breaks editor templates. Previously, the "for" attribute of the generated label was being set to the label text, but now everything is being set to a generated GUID.

This is fine for the generated fields since they can link the labels to the controls automatically (by setting the ID of the control to the GUID), but for templates, this means that we cannot link the generated label to the control since we cannot get access to the GUID in the template (as far as I know). Previously, when the "for" attribute on templates was the same as the label text, I could set the ID of the custom template control to the label text and the controls will be linked correctly.

===

ADMIN EDIT

===

• Not using Editor Templates, so the built-in editors are properly connected to their labels.
• Using a custom popup edit form, so you can control the rendering of the whole popup form.