WebAssembly: scroll to selected row

[Chris Vandewiele]

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

[Sarveswaran Palani]

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

[Chris Vandewiele]

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

[Sarveswaran Palani]

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

[Chris Vandewiele]

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

[Chris Vandewiele]

Scroll.js solved my problem

Thanks

Chris Vandewiele

[Sarveswaran Palani]

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