Page Down and Page Up buttons are not working until the user clicks on the scroll when virtual scrolling is enabled.

To reproduce the issue:

1. Open the following REPL example:

https://blazorrepl.telerik.com/QHYPQVFv55nHGRWV59

2. Focus on the Grid.

3. Try to scroll with the PageDown button.

===ADMIN EDIT===

Currently, we use groups for calculating all aggregates in Grid. We can optimize the process so that when there are no groups, specific aggregates are still calculated.

Scenario #1

I want my users to confirm the update of a cell value with the built-in Confirmation Dialog for Blazor. If I use the keyboard (Enter, Tab) to close the edit the Confirmation dialog will popup, but after closing it the Grid hangs. 

Scenario #2

If I edit a cell and press enter very quickly, the grid is not able to get the new value inserted after confirming it through the dialog.

Scenario #3

If you press Enter very quickly to confirm the value for deletion, the value is not always removed.

I need to lock the "expand" column in the Grid(Locked=true).

When I scroll horizontally, the first column with the expand/collapse icon scrolls out of view. I would like a way to lock it.

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.

Selection performance suffers if the Grid has a large page size and uses child components in column templates:

https://blazorrepl.telerik.com/QHaLcVbl25YrVZU821

This is because the Grid doesn't apply performance optimizations for templates and always re-renders them.

Please expose a setting to disable re-rendering if it's not necessary.

Hi

The reset button is not working when we use the column template with the Telerik grid. How to solve this problem? Can you please send it example for reference?

Example Link :

Working Without Column Template

=>https://demos.telerik.com/blazor-ui/grid/column-menu

Not Working With Column Template

=>https://demos.telerik.com/blazor-ui/grid/custom-column-menu

Thanks

Consider this test page: https://blazorrepl.telerik.com/cSEQOTQY53LRL4je36

1. Check some checkboxes for the Name column and click on the Filter button. This works as expected.
2. Uncheck all checkboxes in the Name column checkbox list and click on the Filter button again. This time, the previously checked checkboxes remain checked and the filters remain applied.

This happens only when using a column menu - ShowColumnMenu="true".

===

A possible workaround is to use a FilterButtonsTemplate and clear the filters programmatically if the filter descriptor is empty:

@using Telerik.DataSource
@using Telerik.DataSource.Extensions
 
<TelerikGrid TItem="@Employee"
             OnRead="@OnReadHandler"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             ShowColumnMenu="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
        <GridColumn Field="@nameof(Employee.Name)">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@NameOptions"
                                           Field="@(nameof(NameFilterOption.Name))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate Context="filterContext">
                <TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
                               ThemeColor="primary">Filter</TelerikButton>
                <TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
            </FilterMenuButtonsTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Team)" Title="Team">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@TeamsList"
                                           Field="@(nameof(TeamNameFilterOption.Team))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Employee> AllGridData { get; set; }

    #region custom-filter-data
    List<TeamNameFilterOption> TeamsList { get; set; }
    List<NameFilterOption> NameOptions { get; set; }

    private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
    {
        var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));

        if (hasFilters)
        {
            await filterContext.FilterAsync();
        }
        else
        {
            await filterContext.ClearFilterAsync();
        }
    }

    private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
    {
        await filterContext.ClearFilterAsync();
    }

    //obtain filter lists data from the data source to show all options
    async Task GetTeamOptions()
    {
        if (TeamsList == null) // sample of caching since we always want all distinct options,
                               //but we don't want to make unnecessary requests
        {
            TeamsList = await GetNamesFromService();
        }
    }

    async Task<List<TeamNameFilterOption>> GetNamesFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        // this is just one example of getting distinct values from the full data source
        // in a real case you'd probably call your data service here instead
        // or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
        List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
            Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();

        return await Task.FromResult(data);
    }

    async Task GetNameOptions()
    {
        if (NameOptions == null)
        {
            NameOptions = await GetNameOptionsFromService();
        }
    }

    async Task<List<NameFilterOption>> GetNameOptionsFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
            Distinct().Select(n => new NameFilterOption { Name = n }).ToList();

        return await Task.FromResult(data);
    }
    #endregion custom-filter-data

    async Task OnReadHandler(GridReadEventArgs args)
    {
        //typical data retrieval for the grid
        var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
        args.Data = filteredData.Data as IEnumerable<Employee>;
        args.Total = filteredData.Total;
    }

    protected override async Task OnInitializedAsync()
    {
        AllGridData = new List<Employee>();
        var rand = new Random();
        for (int i = 1; i <= 15; i++)
        {
            AllGridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }

        await GetTeamOptions();
        await GetNameOptions();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }

    // in this sample we use simplified models to fetch less data from the service
    // instead of using the full Employee model that has many fields we do not need for the filters

    public class TeamNameFilterOption
    {
        public string Team { get; set; }
    }

    public class NameFilterOption
    {
        public string Name { get; set; }
    }
}

I want to compare special characters (such as umlauts) to other user input.

I have the following Grid setup:

• A Grid column is bound to DateOnly or DateOnly?
• I have manually defined the OnRead event
• Filter the DateOnly column, and to get the exception:
  • Serialize and deserialize the args.Request in the OnRead event handler with System.Text.Json OR
  • Page the Grid back and forth

Exception: System.ArgumentException: Operator 'IsEqualTo' is incompatible with operand types 'DateOnly?' and 'DateTime'

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

Please add the ability to expand or collapse all rows as a default feature of the Grid and add the option to set a title on the header (e.g. "Expand").

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.

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.

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.

I'm using an OnRead grid with ExpandoObjects. The error happens on the backend when trying to process the result of ToDataSourceResult(...)

When trying to access the Items property of AggregateFunctionsGroup in a multi level grouping scenario, using ExpandoObject, and the top level group has a null key, trying to access the Items property will result in a NullReferenceException. I've made this helper, but it cannot process the subgroups because of this error.

private static void FlattenGroup<T>(AggregateFunctionsGroup group, List<T> result)
{
    if (group == null)
    {
        return;
    }

    if (group.HasSubgroups)
    {
        foreach (var sub in group.Items.OfType<AggregateFunctionsGroup>())
        {
            FlattenGroup(sub, result);
        }
    }
    else
    {
        result.AddRange(group.Items.OfType<T>());
    }
}

In a scenario where I have an ExpandoObject with properties A and B, where A = 1 and B = null; grouping by A then B works. Grouping by A or B alone also works. But grouping by B then A causes the NullReferenceException when trying to access the group.Items. 

When clicking on the Add Button in a Grid, a new item is created and displayed in edit mode.

Problem is, the OnEdit event is not triggered.  I need to set a default value for new items and added the code in the OnEditHandler with if(args.IsNew){ //set default value}.

Unfortunately this does not work because the event is not triggered.  This makes me wonder what "args.IsNew" is for if not for the usecase described above.

A workaround is to initialize the collection of the selected items:

<TelerikButton OnClick="@LoadData">Load Data</TelerikButton>

<TelerikGrid Data=@adminUsers Height="300px" Pageable=true PageSize=10 SelectionMode="@GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedAdminUsers">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true"></GridCheckboxColumn>
        <GridColumn Field=@nameof(User.DisplayName) Title="User Name" />
        <GridColumn Field=@nameof(User.Department) Title="Department" />
        <GridColumn Field=@nameof(User.Status) Title="Status" />
        <GridColumn Field=@nameof(User.EmployeeId) Title="Employee Id" />
    </GridColumns>

</TelerikGrid>

@code
{
    public IEnumerable<User> SelectedAdminUsers { get; set; } = Enumerable.Empty<User>();

    public List<User> adminUsers { get; set; }

    void LoadData()
    {
        adminUsers = Enumerable.Range(1, 200).Select(x => new User
        {
            EmployeeId = x,
            Status = $"status {x}",
            Department = $"department {x}",
            DisplayName = $"name {x}"
        }
        ).ToList();
    }

    public class User
    {
        public string DisplayName { get; set; }
        public string Department { get; set; }
        public string Status { get; set; }
        public int EmployeeId { get; set; }
    }
}