This is a migrated thread and some comments may be shown as answers.

Grid changes pages after selecting new row

2 Answers 330 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 27 Mar 2020, 04:33 AM

I'm having a problem with selecting a row after changing pages that is reproducible with the attached code.  

To reproduce, click on any row on the first page, 'Employee 5' for example.

Once 'Employee 5' is highlighted, navigate to page 4 using the selector at the bottom.

On page 4, click on 'Employee 35'.  The grid will immediately jump back to page 1.  If you return to page 4 you will see that 'Employee 35' is selected (highlighted), it just didn't stay on that page.  Is this a bug or am I doing something wrong?

 

 

 

 

@page "/gridtest"
 
@inject IJSRuntime JsInterop
 
<TelerikGrid Data=@GridData
             Page="currentPage"
             SelectionMode="GridSelectionMode.Single"
             @bind-SelectedItems="SelectedItems"
             Pageable="true" PageSize="10"
             Height="500px"
             Class="@theGridClass">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>
 
 
<div class="row justify-content-center" style="margin-top:5px;">
    <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(1, 5))">Select 5</TelerikButton>
    <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(2, 15))">Select 15</TelerikButton>
    <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(3, 25))">Select 25</TelerikButton>
    <TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(4, 35))">Select 35</TelerikButton>
</div>
 
 
@code {
    string theGridClass { get; set; } = "theSpecialGrid";
    int currentPage = 1;
     
    async Task SelectItem(int page, int rowId)
    {
        // Select Grid Page
        currentPage = page;
 
        // Select Row
        SelectedItems = GridData.Where(item => item.EmployeeId == rowId).ToList();
 
        await Task.Delay(20);//rougly one rendering frame so this has the chance to render in the browser
        await JsInterop.InvokeVoidAsync("scrollToSelectedRow", "." + theGridClass);
    }
 
    public List<Employee> GridData { get; set; }
    public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();
 
    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 55; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }
 
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

 

 

 

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 27 Mar 2020, 09:09 AM

Hello Michael,

The problem here is that the Page parameter of the grid only takes the currentPage variable, but never sets it. So, when the grid has to re-render (e.g., when an item is selected), the value of that field is taken and the grid shows the corresponding page. That's a typical problem when using only one-way binding and it is solved either by using two-way binding, or by manually updating the variable in a corresponding event (such as PageChanged).

That said, here's the simplest solution:

<TelerikGrid Data=@GridData
             @bind-Page="currentPage"
             SelectionMode="GridSelectionMode.Single"
             @bind-SelectedItems="SelectedItems"
             Pageable="true" PageSize="10"
             Height="500px"
             Class="@theGridClass">

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 27 Mar 2020, 05:59 PM
Makes sense.  Thanks!
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Veteran
Share this question
or