We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

WebAssembly: scroll to selected row

Dear,


I have webassembly sfgrid where i position on a row via  

    long lPrimaryID = 1005;

    var index = await Grid.GetRowIndexByPrimaryKeyAsync(lPrimaryID);

    await Grid.SelectRow(index);

This is working fine, but when the row is not visisble, it is positioned but not visible. How can i scroll to the row.

I have tried this one but it is not working on webassembly project.

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 ? | Blazor Forums | Syncfusion

Can you help please? IS there an easy way to fix this please?

Thanks

Chris Vandewiele


6 Replies 1 reply marked as answer

SP Sarveswaran Palani Syncfusion Team March 14, 2023 04:35 PM UTC

Hi Chris,

Greetings from Syncfusion support.

From your query, we suspect that you want to scroll to the selected row based on the row index. We suggest you to use ScrollIntoViewAsync inbuilt public method to scroll to specific row or column based on row index and column index. Kindly refer the attached API link for your reference.

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_


Please get back to us, if you have any further queries.

Regards,
Sarvesh



CV Chris Vandewiele March 20, 2023 09:47 AM UTC

Good morning,


Thanks for the reply. This is working perfect for an observable sfgrid with one page.

But how can i position when there are more pages?


For example:

I have a table with languages LanguageID is the key

How do i know on which page the added 'language' is?

Now i am executing following code to position (perfect with one page):


lLanguageIDposition = lAddedLanguageListDTO.LanguageId;

var index = await sfLanguageGrid.GetRowIndexByPrimaryKeyAsync(lLanguageIDposition);

await sfLanguageGrid.ScrollIntoViewAsync(0, Convert.ToInt32(index), Convert.ToInt32(sfLanguageGrid.RowHeight));

await sfLanguageGrid.SelectRow(index);


I am on page one and want to position on last line in page 3.

Last line is primary key 272

when i do 

var index = await sfLanguageGrid.GetRowIndexByPrimaryKeyAsync(272);

It cannot find the line?? index = -1.

So how can i determine the page where de primary key 272 is?



Can you help please?


Thanks

Chris Vandewiele





SP Sarveswaran Palani Syncfusion Team March 21, 2023 01:20 PM UTC

Hi Chris,

Query: I am on page one and want to position on last line in page 3!

From your query we understand that you want to select a particular record from a Grid by navigating to its page. We have prepared sample based on your requirement using GotoPage() and SelectRow() method of Grid along with DataBound event of the Grid. Refer the below code snippet and sample for your reference.

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true">

   <GridEvents DataBound="DataHandler" TValue="Order"></GridEvents>

    <GridColumns>

 
 

 public async Task DataHandler()

    {

        if (InitialRender) // to handled during the initial rendering of Grid

        {

            InitialRender = false;

            for (int i = 1; i <= Grid.PageSettings.PageCount; i++)

            {

                List<Order> Rows = await Grid.GetCurrentViewRecordsAsync(); // returns the current view data

                for (int j = 0; j < Grid.PageSettings.PageSize; j++)

                {

                    if (Rows[j].OrderID == Value)

                    {

                        await Grid.SelectRowAsync(j);

                        ContinuePaging = false// prevent the default navigation

                    }

                }

                if (ContinuePaging)

                {

                    await Grid.GoToPageAsync(i + 1); // if current page does not contain the record navigate to next page.

                }

            }

        }

    }

 


Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPage_System_Double_

         https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRow_System_Double_System_Nullable_System_Boolean__

             

Please get back to us if you have any further queries.

Regards,
Sarvesh


Attachment: BlazorApp9_7a69f55b.zip


CV Chris Vandewiele March 22, 2023 09:20 AM UTC


Hello


the databound DataHandler is ok for positioning but the line 1148 is selected but not shown on the screen.


Can you tell me how to make the selected line visible on te screen wth programming code


and not using EnableVirtualization="true". I do not like the paging with EnableVisualisation.




I have uploaded my new version.


Can you help please

Thanks


Chris Vandewiele





Attachment: BlazorAppPosition_f87cf5e5.zip


CV Chris Vandewiele March 27, 2023 12:41 PM UTC

Scroll.js solved my problem


Thanks

Chris Vandewiele



Marked as answer

SP Sarveswaran Palani Syncfusion Team March 28, 2023 02:24 PM UTC

Hi Chris,

Thanks for an update.

We’re happy to hear that you have found the solution to the proposed issue. Please get back to us if you need any further assistance. 

Regards,
Sarvesh


Loader.
Live Chat Icon For mobile
Up arrow icon