scroll to selected row

[Walter Martin]

I managed to highlight the selected row from code behind using the piece of code below but I don't find a solution to scroll down the grid to always show this row.

The grid has a fixed height because I add many rows or sometimes modify them from code behind and I don't want the page scroll down so when the number of rows added is higher than the grid height the grid doesn't scroll down to the selected row.

How can I accomplish this ?

    public async void DataBoundHandler(BeforeDataBoundArgs<MagvenditeDTO> args)

    {

        if (!Initial)

        {

            await Task.Delay(100);

            var Idx = await Carrello.GetRowIndexByPrimaryKey(Pkey);   //get index value from primary key

            await Carrello.SelectRow(Convert.ToDouble(Idx));       //select the added row by using index value of the record 

        }

        Initial = false;

    }

[Rahul Narayanasamy]

Hi Walter, 

Greetings from Syncfusion. 

Query: scroll to selected row 

We have validated your query and we suggest you to use the SelectRow method of Grid, with this method you can programmatically select a row in Grid. And to scroll to the corresponding position, we have used the Microsoft.Jsinterop to achieve this. In the interop file, we have set the scrollTop for Grid’s content. 

 

<Syncfusion.Blazor.Buttons.SfButton OnClick="OnClick">Select Row of index 15</Syncfusion.Blazor.Buttons.SfButton> 

 

<SfGrid @ref="Grid" DataSource="@Orders" EnableHover=false AllowSelection=true Height="280" Toolbar="@(new List<string>() { "Add"})"> 

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="OrderID" Width="110"> </GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="CustomerID" Width="110"></GridColumn> 

        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="ShipCity" Width="110"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="110"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="OrderDate" Format="d" Width="110" Type="ColumnType.Date"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code { 

 

    SfGrid<Order> Grid; 

    public bool IsInitial { get; set; } = true; 

 

    . . . 

 

    public async Task DataBoundHandler(object args) 

    { 

        if (IsInitial) 

        { 

            await Grid.SelectRow(25); 

            JSRuntime.InvokeAsync<object>("scroll", 25);    //here 25 is the row index to be selected 

            IsInitial = false; 

        }    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/162511/ze/BlazorApp1Sample1968938411  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Walter Martin]

It works perfectly

Thanks

[Rahul Narayanasamy]

Hi Walter, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

 

Please get back us if you need further assistance. 

 

Regards, 

Rahul 

[Geoff Hopkins]

Hi Walter,

How to implement this in reactjs ?
i got JSRuntime is not defined

Thanks in advance

[Walter Martin]

Hello Geoff

I'm sorry but I'm using Blazor and not React so I think you need to add this request in the React's forum

Best Regards

[Vikram Sundararajan]

Hi Geoff,

Greetings from Syncfusion support,

Based on your query want to scroll to selected row position. We have already discussed the same in our documentation. Please refer the below code snippet and documentation for more information.

[App.js]

 

const rowSelected = (args) => {

        if (grid) {

            const rowHeight = grid.getRows()[grid.getSelectedRowIndexes()[0]].scrollHeight;

            grid.getContent().children[0].scrollTop =rowHeight * grid.getSelectedRowIndexes()[0];

        }

    };

 

Scroll to Selected row- https://ej2.syncfusion.com/react/documentation/grid/scrolling#scroll-to-selected-row

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S