Scroll to Selected Row based on the rowindex of another grid

[Baba Goud Gadiga]

Hi team,

I have two grids on my page and based on the row selection of the first grid, i need to select and scroll to the row in the second grid.

I followed couple of links below as well as the samples provided which describe on how to do it, but I am getting an exception .Note: The samples work though. 

https://www.syncfusion.com/forums/155896/how-to-scroll-programatically-to-a-specific-grid-row-how-to-disable-rows-based-on-row-value

https://www.syncfusion.com/forums/162511/scroll-to-selected-row

The exception is 

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Failed to execute 'scroll' on 'Window': The provided value is not of type 'ScrollToOptions'.

      TypeError: Failed to execute 'scroll' on 'Window': The provided value is not of type 'ScrollToOptions'.

Below is the code behind.

 public async void KittingPartsGridRowSelected(RowSelectEventArgs<KittingSchedule> args)

        {           

                SelectedRowIndex = await kittingScheduleGrid.GetRowIndexByPrimaryKey(args.Data.KittingScheduleID);

                selectedPartsScheduleID = args.Data.KittingScheduleID;

                await kittingScheduleGrid.SelectRow(SelectedRowIndex);

                await JSRuntime.InvokeAsync<object>("scroll", SelectedRowIndex);

            }

        }

        public async Task KittingScheduleDataBoundHandler(object args)

        {

            await kittingScheduleGrid.SelectRow(SelectedRowIndex);

            await JSRuntime.InvokeAsync<object>("scroll", SelectedRowIndex);

        }

Below is the javascript function

function scroll(index){

    var grid = document.getElementById("kittingScheduleGrid")[0].blazor__instance;

    var rowHeight = grid.getRowHeight();

    grid.getContent().scrollTo = (index - 1) * rowHeight;

}

Thanks

Ba

[Renjith Singh Rajendran]

Hi Baba, 

 

Greetings from Syncfusion support. 

 

We suggest you to use the below JavaScript codes to scroll to the corresponding index in second grid. Please refer and use the codes below, 

 

 

function scroll(index) { 

    var grid = document.getElementById("kittingScheduleGrid").blazor__instance; 

    var rowHeight = grid.getRowHeight(); 

    grid.getContent().scrollTop = (index - 1) * rowHeight;  //do the calculations to set the scrollTop value for grid content  

} 

 

 

We have also prepared a sample for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp2087815766 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R 

[Baba Goud Gadiga]

Hello Renjith,

Thank you for looking at the issue, your effort is much appreciated.

With the new changes, I don't see the error anymore and the scroll also works as expected.

Thanks

Baba

[Vignesh Natarajan]

Hi Baba, 

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan