1. Home
  2. Forum
  3. Blazor
  4. Is it possible to scroll to the selected row when using the SFgrid method Grid.SelectRow(row) if the selected row is out of view ?

Is it possible to scroll to the selected row when using the SFgrid method Grid.SelectRow(row) if the selected row is out of view ?

Is it possible to scroll to the selected row when using the SFgrid method Grid.SelectRow(row)  if the selected row is out of view ?
If yes how to accomplish it.

Thank you in advance

Best regards
Panikos Frangoudes

3 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team March 18, 2021 09:11 AM UTC

Hi Frangoudes,  
 
Thanks for contacting Syncfusion support.  
 
Query: “Is it possible to scroll to the selected row when using the SFgrid method Grid.SelectRow(row)  if the selected row is out of view ?” 
 
Yes, we can achieve your requirement by scrolling the Grid to that particular height by calculating its (tr element) scrollheight and selecting the record using SelectRow method. Refer the below code example.  
 
<Syncfusion.Blazor.Buttons.SfButton OnClick="OnClick">Select Row of index 55</Syncfusion.Blazor.Buttons.SfButton> 
  
<SfGrid @ref="Grid" DataSource="@Orders" EnableHover=false AllowSelection=true Height="280" Toolbar="@(new List<string>() { "Add"})"> 
</SfGrid>  
@code { 
  
    SfGrid<Order> Grid; 
    public async Task OnClick() 
    { 
        await JSRuntime.InvokeAsync<object>("scroll", 55);    //here 55 is the row index to be selected 
        await Grid.SelectRow(55); 
    } 
 
function scroll(index) {    var grid = document.getElementsByClassName("e-grid")[0].blazor__instance;    var rowHeight = grid.getRowHeight();    grid.getContent().scrollTop = (index - 1) * rowHeight;}
 
For your convenience we have prepared a sample which can be downloaded from below  
 
 
Please get back to us if you have further queries.  
 
Regards,
Vignesh Natarajan 


Marked as answer
FP Frangoudes Panikos March 31, 2021 06:43 AM UTC


Good morning Vignesh ,


thank you for your prompt reply, which works ok.


I am trying to use the grid to insert new, edit  and delete records by using the keyboard as much as possible. So to answer the following will be a great help and very important.

Please note that I am using NewRowPosition="NewRowPosition.Bottom" setting so that by pressing the Insert key a new record will be inserted at the end of the grid.


I would like to further ask how to 

1. How to set focus to the selected row  from code in order to use F2 to start editing or call Grid.StartEdit() on that row 

2. How to get the Current Row index at any moment (it seems that the row index is changed behind the scenes to the first row index 0)

3      Presing the insert key  a new record will be inserted at the end of the grid and when done the same row must be selected and be ready for editing or           deleting by the use of the keystrokes or the use of arrowup or arrowdown keys

4.     By pressing F2 on a selected row the row starts editing. When done the same row must be selected and be ready to accept keys again, like the ArrowUp  or  ArrowDown to move to another row.

5. when A new row is inserted and Esc key is pressed to cancel then the last row in the grid must be selected and ready to be used by the keyboard

6. When Editing a row and Esc key is pressed the the row in editing must become selected and ready to be used by the keyboard

7. If the grid is empty, then when  focus is moved to the grid by mouse click or by Grid.FocusAsync() then how to kick the insert a new record procedure.


In the hope that I am not asking you too much 

Thank you in advance
Panikos Frangoudes


VN Vignesh Natarajan Syncfusion Team April 1, 2021 12:23 PM UTC

Hi Frangoudes, 
 
Thanks for the update.  
 
Query: “How to set focus to the selected row  from code in order to use F2 to start editing or call Grid.StartEdit() on that row” 
 
We suggest you to focus the Grid using FocusAsync() method of the Grid. Once the Grid is focused, we can use navigation (Arrow) key (up / down) to select the records. Refer our API & UG documentation for your reference 
 
 
Please get back to us with more details if we misunderstood your query. 
 
Query: “How to get the Current Row index at any moment (it seems that the row index is changed behind the scenes to the first row index 0)”       
 
We suspect that you want to get the current selected row index on button click. We suggest you to achieve your requirement using GetSelectedRowIndexes() method of the Grid. Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Query: “No. 3 to No. 6” 
 
We have analyzed the reported issue and we are able to reproduce the reported issue at our end also. We have confirmed them as a bug and logged the defect report “Grid gets focused out after performing CRUD action” for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our weekly release which is expected to be rolled out by mid of May 2021. We will update you once the release is rolled out.    
       
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.       
   
 
Till then we appreciate your patience.   
 
Query: “When focus is moved to the grid by mouse click or by Grid.FocusAsync() then how to kick the insert a new record procedure.” 
 
We can focus the Grid by calling the FocusAsync() method. Once the Grid is focused, pressing Insert key will insert the new record. If you are facing any difficulties in this behavior, kindly get back to us with more details. It will be helpful for us to validate the reported query at our end and provide solution as early as possible.   
 
Regards, 
Vignesh Natarajan  
 
 
 
 
 
 


Loader.
Up arrow icon