Programmatic active row selection

[SL]

Is there a way to programmatically select an active row in the Grid?  And if the active row is not visible allow scrolling the active row into view? 

 

Thanks.

[Marin Bratanov]

Hello Joel,

You can select a row programmatically by using two-way binding on the SelectedItems collection:

• single selection: https://docs.telerik.com/blazor-ui/components/grid/selection/single#two-way-binding-of-selecteditems
  
• multiple selection: https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#two-way-binding-of-selecteditems
  

You may also find useful this sample: https://github.com/telerik/blazor-ui/tree/master/grid/persist-selection

With the keyboard support that we introduced in our latest release, the user can also use the up/down arrows to move around the rows, and that will also scroll the grid.

There is no built-in feature for scrolling to a specific selected row, however. If you are using single selection you could use JS interop to find the row the has the selected state and call its .scrollIntoView() method. For multiple row selection that would become a heuristic task, however.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor

[SL]

You guys are great, very fast response.  Thank you very much.

[Michael]

"There is no built-in feature for scrolling to a specific selected row, however. If you are using single selection you could use JS interop to find the row the has the selected state and call its .scrollIntoView() method."

Can you elaborate about how to do this?  After an update I want to be able to select a row and make sure is viewable in the grid.  I know virtually nothing about JS (hence my enthusiasm for Blazor) so an actual example would be great.

Mike V.

 

 

[Marin Bratanov]

Hello Michael,

Here's a sample JS function that expects a CSS selector to find the correct grid, then finds the first selected row and calls its .scrollIntoView() method:

        function scrollToSelectedRow(gridSelector) {
            var gridWrapper = document.querySelector(gridSelector);
            if (gridWrapper) {
                var selectedRow = gridWrapper.querySelector("tr.k-state-selected");
                if (selectedRow) {
                    selectedRow.scrollIntoView();
                }
            }
        }

and here is a sample way of calling it (see the SelectItem method from the button click):

@inject IJSRuntime JsInterop

<TelerikButton OnClick="@SelectItem">Select item</TelerikButton>

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             @bind-SelectedItems="SelectedItems"
             Pageable="true" PageSize="30"
             Height="300px"
             Class="@theGridClass">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    string theGridClass { get; set; } = "theSpecialGrid";

    async Task SelectItem()
    {
        // select item 11 which would be hidden initially
        SelectedItems = GridData.Where(item => item.EmployeeId == 11).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; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

[Michael]

Marin:

Thanks for the prompt reply and sample code.  This solves half of my problem; in addition to being able to select the row and scroll it into view I need to select the correct page that the row appears on.  Imagine a grid with 100 rows with 10 rows per page.  The user edits row 5 and as a consequence of the changes it will now be the 25th row of the grid-- so it's now on page 3.  I need to both select page 3, select the row and make sure it's visible.

I thought I could set a reference to the grid component and select the page in code, but that only changes the page selector at the bottom of the grid, it doesn't advance the contents of the grid so that it's showing the rows on that page. (at least when I do it).

Can you please provide an example of how to move to a different page of the grid?

Thanks

[Marin Bratanov]

Hello Michael,

You can set the Page parameter of the grid to make it go to a different page:

<TelerikNumericTextBox @bind-Value="@DesiredPage" Min="1" Max="34"></TelerikNumericTextBox>

<TelerikGrid Data="@MyData" Pageable="true" PageSize="15" Page="@DesiredPage" Height="500px">
    <GridColumns>
        <GridColumn Field="ID"></GridColumn>
        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    int DesiredPage { get; set; } = 1;
    public IEnumerable<object> MyData = Enumerable.Range(1, 500).Select(x => new { ID = x, TheName = "name " + x });
}

 

Regards,
Marin Bratanov
Progress Telerik

[Michael]

Thanks.  That works great.

[Michael]

Great, thx for the quick reply that helps

[Roger Graham]

Hello, 

How to get the page number of selected item? So that we can set PageNumber dynamically to navigate to that grid view. 

[Marin Bratanov]

Hello Roger,

You could start with the approach described here: https://docs.telerik.com/blazor-ui/knowledge-base/grid-get-index-of-grid-row. The example shows how to get the index of a particular item, in a similar fashion you could get that index according to all the data you have, not just the current page (that logic is entirely up to the app, the grid cannot influence the way you obtain data, and especially how to do this in a performant manner). Then, since you know the PageSize, you can perform the calculation to know which Page this item is on.

Regards,
Marin Bratanov
Progress Telerik

[John]

fyi, scrolling into view with a virtual grid worked fine in 2.22.0 but broke in 2.24.  Not sure how or why this broke, but now you can scroll to the item, but the list will render as empty, just with the scrollbar visible.  If  you manually scroll a bit, the grid will update and items will rerender.

Trying to figure out how to make the grid rerender after this now.    I would go back to 2.22.0 but its no longer in the nuget package source. 

[Dimo]

Hey John,

Scrolling to a Grid row in virtual mode should rely on the Skip property of the Grid state. Are you using this approach? What exactly isn't working with new versions? Can you share your implementation?

@using Telerik.DataSource.Extensions

<p>
    <label>
        Type a Row ID between 1 and @Data.Count :
        <TelerikNumericTextBox Min="1" Max="@Data.Count" @bind-Value="@RowID" />
    </label>
    <TelerikButton OnClick="@ScrollToRow">Scroll to this ID</TelerikButton>
</p>

<TelerikGrid @ref="@MyGrid"
             Data="@CurrentData"
             TotalCount="@CurrentTotal"
             ScrollMode="GridScrollMode.Virtual"
             PageSize="100"
             Height="480px"
             RowHeight="48"
             OnRead="@OnGridRead">
    <GridColumns>
        <GridColumn Field="ID" Width="200px"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private List<GridItem> Data { get; set; }
    private IEnumerable<GridItem> CurrentData { get; set; }
    private int CurrentTotal = 0;
    private int RowID = 1;
    private TelerikGrid<GridItem> MyGrid { get; set; }

    private async Task ScrollToRow()
    {
        var state = MyGrid.GetState();
        // the line below assumes no sorting or filtering.
        // in more complex scenarios, calculate the desired row position
        // based on the whole Grid data set and the current sorting/filtering state
        state.Skip = Math.Min(RowID - 1, Data.Count - 9);
        await MyGrid.SetState(state);
    }

    private async Task OnGridRead(GridReadEventArgs args)
    {
        var result = Data.ToDataSourceResult(args.Request);
        CurrentData = (result.Data as IEnumerable<GridItem>).ToList(); ;
        CurrentTotal = result.Total;
    }

    protected override async Task OnInitializedAsync()
    {
        Data = new List<GridItem>();

        for (int i = 1; i <= 1000; i++)
        {
            Data.Add(new GridItem()
            {
                ID = i,
                Name = "Name " + i
            });
        }
    }

    public class GridItem
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}