When enabling resizing and reordering for the Telerik Grid, using `MinResizableWidth` to set minimal column width will apply the constraint to the column position rather than the actual movable column. This means applying a min width of 200px to the first column will work as expected until the column is moved to another position. Now the column in question no longer has the min width applied, and the column that has moved into the first position has the 200px min width constraint. 

It appears this is due to the constraint being applied to the `data-col-index` rather than the `data-col-initialization-index`, or something to that effect.

The following example has a 200px min-width constraint applied to the "Name" first column, and no custom min-with applied to "Address" second column. Switching the columns by moving the "Name" after the "Address" will apply the constraint to the "Address" and not the "Name".

https://blazorrepl.telerik.com/QJEAcuPE41L7Uhiw44

Currently using 7.1.0 but looks to be an issue in later versions as shown by the REPL example. Tested in Firefox and Chrome.

The column position is arbitrary and the bug isn't due to the constraint being applied to the 0 column, applying the constrain to all even columns then shuffling would result in the constrain still being applied to all even columns.

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.

Since verion 9, the new styling is doing something strange.

The issue is also observable on the Tererik demo site (as well as our published applications) but I have noticed its on webassembly more-so than server apps;

https://demos.telerik.com/blazor-ui/grid/adaptive

If I run the demo site, the new pagination style (where you can type the page you want to navigate to) will flash up for a second, then it will go back to the old style after a second or 2.

Would anyone know why this is happening?

If the GridScrollMode.Virtual is enabled for the Grid, and the NoDataTemplate exceeds the height of the Grid container, a user can infinitely scroll inside the table even when there is no data and the template is displaying.

===ADMIN EDIT===

A possible workaround is to apply "overflow-y: hidden;" when the NoDataTemplate is shown: REPL link.

If I group by a column, and one of the values in the column contains a forward slash ( '/'), then the value will not be grouped, the Grid ignores it.

The issue seems to occur only when LoadGroupsOnDemand is set to true.

===

ADMIN EDIT

===

A possible option for the time being is to disable the LoadGroupsOnDemand feature.

After filtering a nullable int column, the SelectAll checkbox in the GridCheckboxColumn stops working.

Reproduction example: https://blazorrepl.telerik.com/mTuyHaYM44sLH2yf05

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.

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.

I AutoFit all columns in the Grid but would like to be able to reset their width to the initial value at a later point. 

===

TELERIK EDIT: Here are two workarounds for two possible scenarios:

• Reset all column widths to another value or "auto" value.
• Adjust the last column's width, so that there is no empty space after it.

Reset all column widths to another value or "auto" value

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
               OnClick="@AutoFitColumns">AutoFit Columns</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
               OnClick="@ResetColumns">Reset Column Widths</TelerikButton>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Reorderable="true"
             Resizable="true">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Id)" />
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.Category)" />
        <GridColumn Field="@nameof(Product.Stock)" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridRef { get; set; }

    private List<Product> GridData { get; set; } = new();

    private async Task AutoFitColumns()
    {
        if (GridRef == null)
        {
            return;
        }

        await GridRef.AutoFitAllColumnsAsync();
    }

    private async Task ResetColumns()
    {
        if (GridRef == null)
        {
            return;
        }

        var gridState = GridRef.GetState();

        foreach (var columnState in gridState.ColumnStates)
        {
            columnState.Width = "auto;";
        }

        gridState.TableWidth = $"99.9{DateTime.Now.Millisecond}%"; // Set something close to 100% instead of removing the value

        await GridRef.SetStateAsync(gridState);
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Category = $"Category {i % 4 + 1}",
                Stock = Random.Shared.Next(0, 100),
                Discontinued = i % 3 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
        public int Stock { get; set; }
        public bool Discontinued { get; set; }
    }
}

Adjust the last column's width, so that there is no empty space after it

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Reorderable="true"
             Resizable="true"
             Width="@GridWidth"
             ShowColumnMenu="true"
             OnStateChanged="@( (GridStateEventArgs<Product> args) => OnGridStateChanged(args) )">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="@nameof(Product.Id)" />
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.Category)" />
        <GridColumn Field="@nameof(Product.Stock)" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridRef { get; set; }

    private List<Product> GridData { get; set; } = new();
    private string GridWidth => $"{GridIntWidth}px";

    private int GridIntWidth = 1000; // A pixel Grid width is required for this scenario
    private int GridMaxTableIntWidth => GridIntWidth - 17; // Assuming no horizontal scrolling

    private async Task OnGridStateChanged(GridStateEventArgs<Product> args)
    {
        if (args.PropertyName == "ColumnStates" && Double.Parse(args.GridState.TableWidth.Replace("px", "")) < GridMaxTableIntWidth)
        {
            args.GridState.TableWidth = $"99.9{DateTime.Now.Millisecond}%"; // Set something close to 100% instead of removing the value

            int lastVisibleColumnIndex = GetLastVisibleIndex(args.GridState.ColumnStates);
            args.GridState.ColumnStates.First(x => x.Index == lastVisibleColumnIndex).Width = "auto";

            await GridRef!.SetStateAsync(args.GridState);
        }
    }

    private int GetLastVisibleIndex(ICollection<GridColumnState> columnStates)
    {
        int index = 0;

        var visibleColumnStates = columnStates.Where(x => !x.Visible.HasValue || x.Visible.Value);

        foreach (var columnState in visibleColumnStates)
        {
            index = Math.Max(index, columnState.Index);
        }

        return index;
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Category = $"Category {i % 4 + 1}",
                Stock = Random.Shared.Next(0, 100),
                Discontinued = i % 3 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
        public int Stock { get; set; }
        public bool Discontinued { get; set; }
    }
}

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

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

OnChange and OnBlur event for editors (TelerikTextBox, NumericTextBox, and others) is not fired in InCell edit mode with Tab key.

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.

Hi Telerik Support

Facing an issue with Keyboard navigation in Telerik Grid component. 

When we use TAB to navigate, the grid header gets focus only for the first time. After completing one round of navigation, second time after the Toolbar buttons, if we TAB out, focus goes to the pager sections skipping the grid header part.

Pls refer the REPL sample from Telerik website:

https://blazorrepl.telerik.com/GHOUEQPu32fDqVkl23?_ga=2.110299852.854118306.1687429777-597574975.1687340896&_gl=1*1exmltg*_ga*NTk3NTc0OTc1LjE2ODczNDA4OTY.*_ga_9JSNBCSF54*MTY4NzQyOTc3Ny40LjEuMTY4NzQzMDkxNC41Ni4wLjA. 

Steps to reproduce:

1) Use ALT + W and then use TAB key to navigate

2) First focus goes to the Toolbar button (Add Product), then goes to the Grid Header and then if we TAB again focus goes to the Pager section

3) After the Pager section, if we do steps 1 and 2 again, we can see that it skips the Grid Header focus second time onwards.

My Grid uses a lot of data (more than 200 000 records). I noticed that only in Firefox the export fails if the file is large - approximately 60MB.

The export of such large files works well in Chrome and Edge.

Using the grid with OnRead event to fill data. I need to set the sortings at runtime, so I use also the OnStateInit event.

It all works fine because OnStateInit fires before OnRead and I set the sorting inside OnStateInit.

If I put an empty GridAggregates then OnStateInit fires after OnRead thus inside OnRead I don't have the sortings set.

===

ADMIN EDIT

===

As a workaround for the time being, do not include empty GridAggregates tag, only add them when you actually want to include some aggregate functions.

ADMIN EDIT

Workarounds are:

- using a "real" model instead of a dynamic type

- removing the LoadGroupsOnDemand feature (and using the regular paging so you can still have grouping in case you were using virtual scrolling)