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.

Currently, when there is a blank or null value, no text is rendered next to the CheckBox in the CheckBoxList filter. I want to be able to customize that and easily set my desired text. For example, "(Blanks)" as in Excel.

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.

Please add the ability to expand or collapse all rows as a default feature of the Grid.

I've seen the Expand Rows From Code example, but I'd like this to be part of the grid itself, not a button outside of the grid.

I'm trying to add a button in the unused top left cell of the grid, but I've not found a way to use that cell.

The behavior is reproducible in server-side apps when using the Inline or Incell mode and editing numerical values.

When inputting into the field the first value input is either ignored or removed. The default is 0, when backspacing to clear it and then inputting a number, sometimes the number is shown and then immediately removed, and sometimes it's not shown at all and will only displayed when typed a second time.

===

ADMIN EDIT

===

Possible workarounds for the time being:

• Use EditorTemplate with a NumericTextBox component inside: https://blazorrepl.telerik.com/cyvOYBvc39Vnes2L43.
• Use Popup Edit mode.

Please expose the current data of the Grid and TreeList when using Data or OnRead. This will spare the need to cache data for the second time in-memory, or repeat all data operations. The benefit is that the app can:

• Know what data items the user is seeing.
• Obtain the data it its current shape / state.

My scenario is a lot similar to this one and I call SetStateAsync to exit the edit mode. In addition, my Grid is grouped on initialization. I noticed that each time I call SetStateAsync, the AggregateFunctions count of the GroupDescriptor increases and one more identical AggregateFunction is added to the same GroupDescriptor. This results in slowing the editing process.

Here is a simpler reproduction: https://blazorrepl.telerik.com/wekZmTPE35YpD8f504.

I want to filter a Grid by DateTimeOffset? field

===ADMIN EDIT===

There are two possible options:

1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.

REPL example that demonstrates this approach. 

2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type. 

REPL example that demonstrates this approach. 

I have a filterable Grid with Enum values. I am saving the state in the OnStateChanged so I can then restore it on future page loads (similar to the approach here).

When trying to restore the deserialized state in the OnStateInit, the Grid throws:

Unhandled exception rendering component: Specified cast is not valid.

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

===

ADMIN EDIT

===

At the time of writing (UI for Blazor 6.1.0), the Grid only supports int as an underlying type of the Enum values. When the state is deserialized, the Enum values are returned as short and this causes the issue.

To handle the scenario for the time being you can modify the state object before setting it to the Grid. Loop through the filter descriptors in the state and convert the filter value of the columns bound to Enum, so the value type in the state is the supported int.

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.

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