GridScrollMode.Virtual

1 Answer 25 Views
Filter Grid
Mark
Top achievements
Rank 1
Mark asked on 22 Apr 2022, 04:31 PM

I'm using a Grid with GridScrollMode set to Virtual, and a custom filtering function.  When the list is filtered and a checkbox is selected the grid reloads and scrolls back to the top of the list.  This only happens when Scroll Mode is Virtual.  The following example demonstrates the issue.

Steps to recreate

  1. Load the page
  2. Enter a single character in the Filter Criteria box
  3. Scroll down the grid for a page or so
  4. Check a check box
  5. You should be immediately taken back to the to first entry in the filtered list

 

@page "/"

@using Telerik.Blazor.Components;
@using System;
@using System.Text;
@using System.Linq;


<PageTitle>Index</PageTitle>

<div class="row">
    <div class="col-md-6 offset-md-6">
        <input type="text" class="form-control" placeholder="Filter Criteria..." @bind="Filter" @bind:event="oninput" />
    </div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
    <div class="ac-criteria-list">
        <TelerikGrid Data=GetFilteredRows()
                     PageSize="20"
                     Height="295px" RowHeight="50"
                     ScrollMode="@Telerik.Blazor.GridScrollMode.Virtual"
        >
            <GridColumns>
                <GridColumn Field="@(nameof(GridRow.Text))">
                    <Template>
                        @{
                            var item = context as GridRow;
                            <input type="checkbox" id="@item.Id.ToString()" @bind="@item.Selected" @key="@item" />
                            <label for="@item.Id.ToString()">@item.Text</label>
                        }
                    </Template>
                </GridColumn>
            </GridColumns>
        </TelerikGrid>
    </div>
</div>

@code
{
    public string Filter { get; set; } = string.Empty;

    public List<GridRow> FilteredRows { get; set; } = new();
    public List<GridRow> OriginalRows { get; set; } = new();

    protected override void OnInitialized()
    {
        for (var i = 0; i < 200; i++)
        {
            OriginalRows.Add(new GridRow
            {
                Id = i,
                Selected = false,
                Text = $"{i} - {Utility.GenerateRandomString(10)}"
            });       
        }

        FilteredRows = OriginalRows.OrderBy(x => x.Text).ToList();

        base.OnInitialized();
    }

    private List<GridRow> GetFilteredRows()
    {
        if (string.IsNullOrWhiteSpace(Filter))
        {
            return FilteredRows;
        }

        return FilteredRows.Where(row => row.Text.Contains(Filter)).ToList();
    }

    public class GridRow
    {
        public bool Selected { get; set; }

        public int Id { get; set; }

        public string Text { get; set; }
    }

    public class Utility
    {
        private static char[] _chars = new char[36]
        {
            '0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'
        };

        public static string GenerateRandomString(int length)
        {
            StringBuilder stringBuilder = new StringBuilder(length);
            Random random = new Random();
            for (int i = 0; i < length; i++)
            {
                stringBuilder.Append(_chars[random.Next(_chars.Length)]);
            }

            return stringBuilder.ToString();
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 23 Apr 2022, 07:06 PM

Hello Mark,

This code re-renders the component by changing the Data collection reference, and when it re-renders it re-initializes and so starts from the top as it can't know any better. Perhaps you can save and load the grid state when doing that custom filtering so that the Skip can stay (in virtual scrolling the Skip parameter controls how many rows are scrolled).

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Filter Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or