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.

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.

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.

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)

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.

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?

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.

Hello,

Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/

It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02

===

Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.

Hi - this one is a feature request, not a bug. :)

For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."

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.

In a grouped Grid with editing if I collapse all groups and then expand one to edit an item in it, once I press Enter to complete the editing all groups expand.

Please add option for persisting the Collapsed State of the groups.

---

TELERIK EDIT


The feature applies to the other data operations as well (for example, paging, sorting).

Here is how to maintain the collapsed groups after editing by using the Grid OnStateChanged event and the Grid state as a whole:

@using Telerik.DataSource

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@Employee"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@OnGridStateInit"
             OnStateChanged="@OnGridStateChanged"
             EditMode="@GridEditMode.Inline"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

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

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

    private ICollection<int>? GridCollapsedGroups { get; set; }

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

        if (originalItemIndex >= 0)
        {
            GridData[originalItemIndex] = updatedItem;
        }

        GridCollapsedGroups = GridRef!.GetState().CollapsedGroups;
    }

    private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
    {
        if (args.PropertyName == "EditItem" && GridCollapsedGroups != null)
        {
            args.GridState.CollapsedGroups = GridCollapsedGroups;

            await GridRef!.SetStateAsync(args.GridState);

            GridCollapsedGroups = default;
        }
    }

    private void OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 20; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = $"Name {i}",
                Team = $"Team {i % 4 + 1}",
                Salary = (decimal)Random.Shared.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}

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. 

When I override the IsValid method to return a ValidationResult the Incell & Inline edit modes allow the editing to be continued even if an invalid value is present. 

===

Telerik edit: A possible workaround is to cancel OnUpdate and possibly, OnEdit too. Here is a complete example:

https://blazorrepl.telerik.com/QyaWxkvv10stL8jB06

Hello,

Currently the Id and Field properties of GridColumnState in the GridState do not have setters. As a result, these properties are not deserialized, e.g. when sending GridState information from the client to the server in WebAssembly apps.

I would like to determine the existing columns in the Grid and tailor the database request, so that the fetched data includes only the required columns.

Another possible use case is detecting outdated GridState information in localStorage, after the app has been updated and the Grid contains different columns.