Based on some program logic and conditions I want to programmatic scroll to a chosen row so the user can see a specific row. For example:

- Scroll to a selected row

- Scroll to a record, based on its Id

-Scroll to the top of the Grid when the user adds a new item

- Scroll to an expanded item in hierarchical Grid

=====ADMIN EDIT======

We have a knowledge-based article that showcases how to scroll the Grid to the selected row. This article links to a sample GitHub application where you see code samples. If you need to scroll to another row, you can use a similar approach.

The Grid will throw a JavaScript error if the user wants to group and drops a column header near the edges of the grouping header or between existing group chips.

This is a regression in version 6.0.0.

REPL test page: https://blazorrepl.telerik.com/wouBdbvw36O4UaAR14

A possible workaround is to remove the empty space, which triggers the error, so that users cannot drop on it:

CSS

    .k-grid .k-grouping-header {
        padding: 0;
        border-bottom-width: 0;
        gap: 0;
    }

        .k-grid .k-grouping-header::before {
            margin: 0;
        }

    .k-grid .k-grouping-header .k-grouping-drop-container {
        margin: 0;
    }

As of UI for Blazor 6.0.2 OnRead event handler is triggered twice if Grid has defined the GridAggregates Parameter (if you try defining Grid without the GridAggregates Parameter, the OnRead event handler is caller once). In the first call the args.Request.Aggregates value is empty, while in the second one that field is populated correctly.

The behavior may be related to the fix of this issue but I'd prefer the Grid to fire OnRead only once if possible.

===

ADMIN EDIT

===

Currently, OnRead fires twice only on initial load. A possible optimization that you can implement on your side is to toggle a flag based on which you can process the data only once. You can do that in the second OnRead as this is when the AggregateResults field of the request gets populated.

Here is a basic example: https://blazorrepl.telerik.com/GokrRkYX536x1mSF35.

The Grid automatically scrolls to top when adding a new item in inline or incell edit mode. However, when the Grid has locked (frozen) columns, this scrolling doesn't occur.

Here is a test page with a JavaScript workaround in the OnAdd event:

@using System.ComponentModel.DataAnnotations

@inject IJSRuntime js

<label><TelerikCheckBox @bind-Value="@EnableScrollWorkaround" /> Enable Workaround</label>

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Inline"
             OnAdd="@OnGridAdd"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate"
             Width="700px"
             Height="400px"
             Class="grid-class">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Width="200px" Locked="true" />
        <GridColumn Field="@nameof(Product.Price)" Width="200px" />
        <GridColumn Field="@nameof(Product.Quantity)" Width="200px" />
        <GridCommandColumn Width="200px" Locked="true">
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">

    function scrollGridToTop() {
        var gridContentArea = document.querySelector(".grid-class .k-grid-content");
        if (gridContentArea) {
            gridContentArea.scrollTop = 0;
        }
    }

</script>

@code {
    private bool EnableScrollWorkaround { get; set; } = true;

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

    private int LastId { get; set; }

    private async Task OnGridAdd(GridCommandEventArgs args)
    {
        if (EnableScrollWorkaround)
        {
            await js.InvokeVoidAsync("scrollGridToTop");
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

        if (originalItemIndex != -1)
        {
            GridData[originalItemIndex] = updatedItem;
        }
    }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 30; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                Quantity = (short)Random.Shared.Next(0, 1000),
                StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
                IsActive = LastId % 4 > 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime StartDate { get; set; }
        public bool IsActive { get; set; }
    }
}

In a navigable Grid with incell edit, if a column has Editable=false the tabbing behavior is as follows: while the user is editing the previous editable cell pressing tab results in skipping the non-editable cell and moving the focus to the next editable cell to open it for edit.

However, the behavior is different when cancelling the editing through the OnEdit event. In this case, while the user is editing the previous editable cell pressing tab results in exiting the edit and keeping the focus to the cell. Subsequent tab press moves to focus to the pager.

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

===

ADMIN EDIT

===

A possible option for the time being is to cancel the edit as shown in the example above but also force the Grid to enter edit of the next editable cell. You can do that through the State: Enter and Exit Grid Edit Mode Programmatically.

Here is a basic example, you may adjust it as needed to fit your exact requirements: https://blazorrepl.telerik.com/mSuLPAFP05HRs7B555.

The Grid shows row skeletons in virtual scrolling scenarios when:

• The Grid is scrolled half a row, but the Skip value in the Grid state is still zero.
  
• The user filters while the Grid PageSize is greater than the total item count.

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

A possible workaround is to:

1. Scroll the Grid to the top with JavaScript. This will trigger a new data request automatically.
2. Reset the Grid state if the Grid is not scrolled, which will again trigger a new data request.

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

Another possible solution is to disable the virtual scrolling at runtime if the total item count is too small: https://blazorrepl.telerik.com/mSOhvYuW47DaMk6c00

We have a grid with a GridCheckboxColumn that we have configured through a '.unselectable-row' style so that certain elements cannot be selected (those elements with a padlock in the second column cannot be selected).

The grid works correctly in isolation, but when we add a TelerikLoaderContainer that is displayed during data loading process, the grid doesn't working properly: it is possible to select all the enabled elements of the grid using the button in the header of the checkbox column. However it is not possible to deselect them from the button in the header of the checkbox column when there is any unselectable element.

Here it is a link to REPL with a reproducible example: https://blazorrepl.telerik.com/GyYhYXPI24gIYgIJ03

To reproduce the problem, you sholud select all grid elements from the checkbox column header button and try to deselect them. You will not be able to deselect all the elements. 
Now comment the LoaderContainer component and repeat the test. You will see that now it is possible to deselect correctly all the elements.

How can we deselect all the elements from the header while keeping the loadercontainer?

I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu. I am using the Telerik Grid. The Column Menus use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.

I want to be able to set a CSS to the main wrapping element of the Column Menu (<div class="k-animation-container>), so I can specifically set the z-index for only Column Menu instances of the animation container. 

I have the following configuration:

Editor component in Grid EditorTemplate and the Grid editing mode is popup

Here is a REPL example https://blazorrepl.telerik.com/QeuUwsvb15sxbLuB04

The popup that opens when editing the Grid resizes when I type in the Editor

Steps to reproduce the issue:

1. Run the REPL example

2. Click the Edit button in the Grid

3. Resize the popup

4. Start to type something in the Editor

5. The popup resizes

The Grid will cancel the insertion of a new item when:

• the new item is not saved yet
• the new item is expanded and its DetailTemplate is visible
• the user changes the value of a column that has an editor template

Blazor REPL test page

===

In the meantime, a possible workaround is to hide the expand button for items, which are not added to the "permanent" Grid data yet. Here is how to do it with CSS:

.k-grid-add-row .k-hierarchy-cell .k-icon {
    display: none;
}

In a filterable Grid, if a column is not bound to a field from the model the Grid uses, it throws with:

Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')

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

The issue is reproducible :

• For `FilterRow` -  on initialization even if the column is not filterable.
• For `FilterMenu` - on initialization when the column is filterable.

===

ADMIN EDIT

===

A possible workaround for the time being is to set the FieldType of the column: https://blazorrepl.telerik.com/wSugvFui10jhcpZy00.

Until version 6.0 it was possible to set the Grid PageSize to "All" by setting it to the total item count. This workaround no longer works.

Please enhance the API to allow setting an "All" page size with code or initially.

Reproduceable example: https://blazorrepl.telerik.com/QSEganvg12BVw2ZU37

Steps to reproduce:

• Add a TelerikGrid to the page - most properties on the grid do not matter for this issue
• Implement the OnStateInit event
• Define the GridAggregates render fragment within the TelerikGrid, but leave it empty - do not put any components inside it
• When the page initializes, note that OnStateInit is never fired

If you remove the GridAggregates emtpy render fragment, or put at least one GridAggregate component in it, OnStateInit fires like expected.

In my project, I've created a component that wraps around the TelerikGrid that I use on all my pages, so that I can have many properties and functions set to reasonable defaults for my use case. My component has an option to conditionally include GridAggregate components within the inner TelerikGrid's GridAggregates render fragment based on separate configuration. If no separate configuration is provided, no GridAggregate components are included, and the GridAggregates render fragment is left blank. Since my component is built in razor markup, there isn't a great option for nulling out that render fragment if it's empty. I had no problems with this exact same code in UI for Blazor version 5.1, and I hope this can be fixed.

Hi,

 documentation missing one extremely "silent" breaking change in grid data binding.

When binding/refreshing(subsequent reload) data to VARIABLE, there is "random" need to call grid.Rebind(); Mostly, when data are loaded outside of the grid, ie by some button, or another component. Used together with selected items and grouping enabled.

<TelerikGrid Data="@GridData" SelectionMode="GridSelectionMode.Single" SelectedItems="..."
						 OnRowClick="@...r"  @ref="GHL" ....>

prior v6.0, everything is OK:

protected async Task ReloadGrid(int? xid)
{

GridData= await LoadDatafromservice<TItem>...;

}

After upgrading same code, it silently not displaying data or cras.

new breaking behavior at v6.0  - hotfix, but "ugly one":

protected async Task ReloadGrid(int? xid)
{

GridData= await LoadDatafromservice<TItem>...;

GHL.Rebind(); //required, otherwise grid content(rows) is not update. Later the grid crash when selecting row etc. Old "rows" are still displayed;

}

Its weird to gues, where rebind is needed and where not. Previous versions acting as expected(async - task = no problem).
Make it documented, "what is correct" and when.

Or if it is a bug, please move it out from feature request.

Thanks