1. Home
  2. Forum
  3. Blazor
  4. How can I select and scroll grid and tree grid rows?

How can I select and scroll grid and tree grid rows?

Hi

I can't speak English. So I use Google Translate.
Please understand if the explanation is not natural.

I wanted to designate the selected row as the top row when retrieving data from the grid.
So I did a search and checked this post.
I developed it with reference and it worked properly.

However, it does not work correctly if you use master detail with two grids in one page.
In the Master Grid's RowSelected event, an attempt is made to select the top row after retrieving detailed grid information,
but the top row of the master grid is selected.

Query 1 - How do I select and scroll a specific row of a specific grid?
Query 2 - And I'm also using a treegrid, how do I select and scroll a specific row of a specific treegrid?

Any help on how to do it would be appreciated.

3 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team September 25, 2020 02:24 PM UTC

Hi JaeHyeong 

Greetings from syncfusion support. 

We have validated your query and found that you need to select a row and the scroll the same to the top for a specific grid. Please refer the below code snippet in which we have invoked the SelectRow method and scrolled the row to the top of the grid. 

Based on the grid reference you are invoking the selectRow method, the row will be selected for that particular grid and then to scroll the row, you have to pass that particular grid id to the scroll method implemented in the interop file to set its scroll top. 

Index.razor 
<Syncfusion.Blazor.Buttons.SfButton OnClick="OnClick">Select Row of index 7</Syncfusion.Blazor.Buttons.SfButton> 
 
<SfGrid ID="ParentGrid" @ref="ParentGrid"> 
.. 
</SfGrid> 
 
<SfGrid @ref="ChildGrid" ID="ChildGrid"> 
.. 
</SfGrid>  
 
 
@code{ 
 
    SfGrid<Order> ChildGrid; 
    SfGrid<EmployeeData> ParentGrid; 
 
 
public async Task OnClick() 
{ 
    await ChildGrid.SelectRow(7); 
    await JSRuntime.InvokeAsync<object>("scroll", 7, ChildGrid.ID);    //here 7th is the row index to be selected 
} 

Interop.js 
window.scroll = function (index, id) { 
    var grid = document.getElementById(id).blazor__instance;  
    var rowHeight = grid.getRows()[index].scrollHeight; 
    grid.getContent().scrollTop = rowHeight * index;  
       //do the calculations to set the scrollTop value for grid content 
} 

Host.cshtml 
<head> 
    <script src="~/interop.js"></script> 
</head> 

Based on your requirement we have prepared the master detail sample. Please download the sample from the below link 


Regards, 
Jeevakanth SP. 


Marked as answer
JJ JaeHyeong Jang September 28, 2020 01:58 AM UTC

Thanks for making the example.
You are very kind.
This works perfectly.
Thank you very much.

JP Jeevakanth Palaniappan Syncfusion Team September 28, 2020 05:17 AM UTC

Hi JaeHyeong, 

Thanks for the update. Please get back to us if you need further assistance. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon